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

  • Profile Image
    jonsan32
    Asked on February 05, 2017 at 09:06 PM

    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!

     

     

  • Profile Image
    liyam
    Answered on February 06, 2017 at 01:51 AM

    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.

  • Profile Image
    jonsan32
    Answered on February 06, 2017 at 02:04 AM

    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.

  • Profile Image
    liyam
    Answered on February 06, 2017 at 02:46 AM

    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. 

  • Profile Image
    AIDAN
    Answered on February 06, 2017 at 01:02 PM

    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.