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>

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