How to expand select box to its default width on focus using CSS

Topic: HTML / CSS« Prev|Next »

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.

  • <!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>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:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.