What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by jonsan32 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!

     

     

    Page URL:
    https://form.jotform.com/70348111119952

  • Profile Image
    JotForm Support

    Answered by liyam 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

    Answered by jonsan32 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
    JotForm Support

    Answered by liyam 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
  • Profile Image
    JotForm Support

    Answered by AIDAN 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.