How can I change the css of a dropdown menu once an option is selected?

How can I change the css of a dropdown menu once an option is selected? I'd like to simply make the text bold and the borders 3px instead of 1px. 

I've toyed with all of the following, with no luck:

option:nth-child(2) {

option {

select {

select, option {

Thanks!

Hello jonsan32,

You can try using this code instead:

option:checked { font-weight: bold !important; }
select { border: solid 3px #000; }
select.form-validation-error { border: solid 3px #ff0000 !important; }

This is how it shall appear right after:

You'll notice the selected element is in bold and that the borders are thicker.

Please let us know if this is not what you mean.

Thanks.

Not exactly what I meant. I think my problem is I have the CHOOSE AN AGE title showing when nothing is selected. I guess I'd want that to have a light border at first, a dark border when selected, and then a red border if unselected. Only when one of the 4 options are chosen should it be a thicker border.

So 3 states:

initial: 

option selected:

option de-selected: form.validation.error

Something like this would work if the 1st line would be activated when something was chosen.

option:checked { border: solid 3px #000; font-weight: bold !important; border: solid 3px #000; }

select { border: solid 1px #000; }

select.form-validation-error { border: solid 3px #ff0000 !important; }

I appreciate the help.

Thanks for the clarification.

How about replacing 

select {

border: solid 1px #000; 

}

with this instead:

select:focus { 

  border: solid 3px #000;

}

option:checked { font-weight: bold !important; }

select.form-validation-error { border: solid 3px #ff0000 !important; }

What this will do is thicken the border when the cursor is on focus on that selected item.

Unfortunately however, it's not possible within CSS alone to thicken the border of a select input field from a chosen option inside that field. Or in other words, it's not possible to style the parent from the child element. This means while on focus of that select field you can thicken the border, it will not stay as is after it is selected.

If you have questions, please let us know. 

This might be the only fix? https://www.jotform.com/answers/378317-Request-The-capability-to-conditionally-change-style-of-fields-with-CSS-based-on-a-selection

Hi,

Please note that the ticket you pointed to is escalated to our developers.

As my colleague liyam thoroughly covered, I'm afraid this is a technical limit if we attempt to alter this purely from a CSS angle.

Apologies for not being able to help further. Thank you in advance for understanding.