Focus on form input

HTML & CSS
1

I set a rule so when user clicks in text input field i will change the label color. Something like this…

input:focus ~ label
  color: tomato;                                 
}

I would like to do same when user enter <select>

So I guess I am confused what would CSS selector be,

Thanks

2

Styling the select element is not easily done and it will not be consistent across browsers.

I was able to set focus on the select and it sets focus on the options too.


select:focus {
   color:tomato
}

See this for more info …

1 Like
3

If you mean you want to style a label that is next to a select just like you did with the input then I thought the answer would be obvious:)

input:focus ~ label,
select:focus ~ label {
	color: tomato;
}

In my example below I put the label immediately following the control and did this:

input:focus + label,
select:focus + label {
	color: tomato;
}

Or did you mean the options as Ray mentioned above?

1 Like
4

This is probably not related but I assigned some fonts to input place holders. One of my input types is <select> and one of the options within <select> is my default option. I would like to assign same rule to that as my placeholders have.

Is there a way to do this

5

Mileage will vary greatly between browsers and some will apply all the styles and some may not apply them so you need to check in case you end up with white text on a white background but you can do something like this.

select option:nth-child(2) {background:cyan;color:#fff;font-family:verdana;font-weight:bold;}

On a quick check it looks as though IE11, Edge, Chrome and Firefox on windows will apply those styles. On a mac system Chrome and Safari will not apply any styles to options but Firefox will.

6

Is there a way to fix this. My form looks just fine on desktop browsers but when i open on iphone 7 and ipad air <select> doesnt take any styling.

When i test this in web dev responsive view everythings looks fine but on actual devices looks like this…

750×733 97 KB

7

You’d have to customise like this example.

It’s a little complicated but check on your phone first to see if it does what you want.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.