Any way to format select dropdowns for less chaos?

HTML & CSS
1

Hi there folks!

I’ve got some dropdowns that can cause a headache when trying to find something in them. Here’s an example:

Is there any way to make it a bit more uniform, aligning the IN, / and MM and have the numbers start at the same spot, perhaps? I’ve been playing with HTML spacers but it’s not working well, plus the list is dynamically generated, so I don’t think it’s handy having to guess spacers every time I input a new entry.

Thanks for your time!

2

There’s not really much you can do for selects as you can’t style text fragments in the options.

You can use optgroup with headings to mark up sections better but may be awkward ina dynamic environment.

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

Apart from simple stuff like that there’s not much else you can do unless you swap the select for standard html dynamically (which is always a bit of a pain).

3

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