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>
<head lang='en'>
    <meta charset='UTF-8'>
        input:focus {
            border: 2px solid red;
        input:hover {
            border: 2px solid green;

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

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

Leave a comment

Leave a Reply