CA Service Management

Expand all | Collapse all

How do you apply CSS to Select Options?

Jump to Best Answer
  • 1.  How do you apply CSS to Select Options?

    Posted 03-01-2018 10:43 AM

    Hi Community,

     

    I'm trying to make a form more user friendly by setting a custom width on my select fields.  The CSS Class attribute is set to a custom CSS class.  The CSS class is changing the width of the select field, but not the select field options.  Does anyone know how I can adjust the options as well?

     

     

    Here's the  CSS that I've added to formdesigner.css

    .z_co_dropdown {
      width: 120px !important;
    }

     

    Thank you!



  • 2.  Re: How do you apply CSS to Select Options?

    Broadcom Employee
    Posted 03-01-2018 05:33 PM

    Hi Grant,

     

    You can style the actual items themselves with the option selector:

    select, option { width: __; }

    This way you are not only constraining the drop-down, but also all of its elements.

     

    Thanks,

    Scott



  • 3.  Re: How do you apply CSS to Select Options?

    Posted 03-01-2018 06:01 PM

    Hi Scott,

     

    Where exactly do you put the width tag?  I'm not sure what you mean by option selector.



  • 4.  Re: How do you apply CSS to Select Options?
    Best Answer

    Broadcom Employee
    Posted 03-02-2018 09:51 AM

    Hi Grant,

     

    You would put this in the same location, so it would look like:

     

    #.z_co_dropdown option {
          width: 120px;
    }

     

    Please also reference the link below for more examples:

    html - How can change width of dropdown list? - Stack Overflow 

     

    But also as noted above it doesn't seem to work well in Chrome, so you could use PHP to clip the String with SubStr, or use jQuery to set the length of the option text.

     

    Thanks,

    Scott



  • 5.  Re: How do you apply CSS to Select Options?

    Posted 03-02-2018 03:50 PM

    Thank you Scott, I’ll give this a try next week.