Focus selector in CSS3

How to select the element that has focus in CSS3?

By using focus selector we can select the element that has focus.

<style>
        input:focus {
            border: 2px solid double;
            background-color: pink;
        }
</style>

<body>
    <form>
        <fieldset>
            <legend>Enter Details</legend>
            Username
            <input type="text" name="user" /><br />
            Password
            <input type="password" name="password" />
            <br />
            <input type="button" value="Submit" />
        </fieldset>
    </form>
</body>

In the above code snippet we have given style focus to the <input> elements. The colour of the text box changes by clicking inside the text box, that means the element got focus by the focus selector.

OUTPUT

Views: 3664 | Post Order: 24

CSS3 > Selectors

Focus selector in CSS3

How to select the element that has focus in CSS3?

Related Posts

Utility Tools