html tutorial - How to expand select box to its default width on focus using CSS - html5 - html code - html form
Answer: Use 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 try to select some option i.e. on focus.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Increase Select Box Size on Focus</title>
<style type="text/css">
select {
width: 150px;
margin: 10px;
}
select:focus {
min-width: 150px;
width: auto;
}
</style>
</head>
<body>
<form>
<select>
<option>Select</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>