WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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:

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

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties