CSS3 Selectors: Combining :focus and :hover

This entry is part 20 of 40 in the series CSS3 Selectors

As a demonstration, we can combine :hover and :focus for a text input box.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>
    <style>
        input:focus {
            border: 2px solid red;
        }
        input:hover {
            border: 2px solid green;
        }
    </style>
</head>
<body>

Name: <input type='text' name='name'>

</body>
</html>
Series Navigation<< CSS3 Selectors: Form control :focus
CSS3 Selectors: form control :disabled >>

Leave a comment

Leave a Reply