Setting the width of selects to the width of the selected option

The field-sizing property is coming to Firefox 152, making it available across all major engines. It allows you to control the sizing behavior of elements with a default preferred size, such as form elements.

I'll take a closer look at the field-sizing property in another blog post, but I wanted to show you a cool feature first.

By default, the width of a select element is determined by its largest option.

Pick a city Amsterdam Rotterdam Scheveningen Utrecht

<label for="place">Pick a city</label>
<select id="place">
  <option>Amsterdam</option>
  <option>Rotterdam</option>
  <option>Scheveningen</option>
  <option selected>Utrecht</option>
</select>

You can see how the select element here is much wider than the width of the characters in the word “Utrecht”. It’s large enough to fit “Scheveningen”, the largest option. That may or may not be desired. At least, I remember occasions in the past where I wanted it to be only as large as the selected option. With field-sizing that's now possible.

select {
  field-sizing: content;
}

Pick a city Amsterdam Rotterdam Scheveningen Utrecht

Now you can see how the width of the select changes with its selected option.

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.