CODEWITHSUNDEEP
htmlcsshover
Rory Danes
Rory Danes

Reputation: 157

CSS text input box hover

I have created a text input box in HTML. I have added CSS to change the box so when the user hovers their mouse over it, the shadow changes but when I tried it in a browser nothing changed when I hovered my mouse over the box.

.searchBar {
    position: absolute;
    top: 307px;
    right: 392.5px;
    width: 500px;
    border-radius: 0px;
    border: 1px solid #f3efee;
    height:40px;
    box-shadow: 0px 1px #f3efee;
}

.searchbar:focus {
    box-shadow: 10px 10px red;
}

Upvotes: 0

Views: 9406

Answers (3)

Friday Ameh
Friday Ameh

Reputation: 1684

Change .searchbar:focus to .searchBar:focus your class name .searchBar has an uppercase B.

.searchBar {
    width: 500px;
    border-radius: 0px;
    border: 1px solid #f3efee;
    height:40px;
    box-shadow: 0px 1px #f3efee;
}

.searchBar:focus {
    box-shadow: 10px 10px red;
}
<div style="background: yellow; padding: 30px">
<input type="text" class="searchBar" />
</div>

Upvotes: 0

Etienne Asselin
Etienne Asselin

Reputation: 11

Note that :focus and :hover are different properties.

Upvotes: 1

trevorp
trevorp

Reputation: 1168

This pseudo class should work when hovering over the .searchBar element:

.searchBar:hover {
    box-shadow: 10px 10px red;
}

Upvotes: 1

Related Questions