Jump to content

Change background color of input fields (need 3 colors for use case)

Recommended Posts

I've searched and see that you can change the color of ALL of the input background fields.  I have a use case where I need 3 different colors for the input fields on ONE page:  #1. Normal for most fields.   #2. Blue background for "male" fields. #3. Pink background for "female" fields.   This is for a nonprofit agency that provides resources to low income families, but we need to capture 4 numbers from each family (Number of Male Adults, Number of Male Children, Number of Female Adults, Number of Female Children) for grant purposes, and was trying to make things more obvious (and redesign the form), because as simple as it sounds, the caseworkers are having trouble with this.  Thx.

Link to comment

Oof I am struggling with this one! @tuanphan is a legend, maybe he can help you? 

The code for stylizing all input fields, or even input fields of a certain type (text, number etc) is easy peasy but this is a little trickier. 

upon inspection each individual form field input is a yui not a block-yui which means we cant target them individually that way. I was messing around with targeting the whole form and narrowing it down by using the :nth-child selector but I'm unable to get it to act the way I want it to. 

 

Good luck and Ill be excited to see when someone finds a solve. 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.