How to expand select box to its default width on focus using CSS
Topic: HTML / CSSPrev|Next
Answer: Use the CSS :focus pseudo-class
By default the size of the <select> element is depend on the size of the largest <option> text. However, sometimes it is useful to set a fixed width to the select box and increase its size back to the original size when the user tries to select some option (i.e. on focus).
The following example demonstrates how to implement this effect with pure CSS:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Increase Select Box Size on Focus</title>
<style>
select {
width: 150px;
margin: 10px;
}
select:focus {
min-width: 150px;
width: auto;
}
</style>
</head>
<body>
<form>
<select>
<option>Choose</option>
<option>This option is large</option>
<option>This option is very large</option>
<option>This option is very very large</option>
<option>This option is very very very large</option>
</select>
</form>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
