CODEWITHSUNDEEP
csstextboxstyles
user1681891
user1681891

Reputation: 281

TextBox CSS Hover/Focus

I added a nice box outline to my text box on focus, but want to add a grey outline on hover, but I ran into an issue. I need to display the box on hover when the textbox is not selected. Any way to do this? Thanks. =)

input:focus{
    outline: none;
    box-shadow: 0px 0px 5px #61C5FA;
    border-color: #5AB0DB;
}

input:hover {
    border: 1px solid #999;
    border-radius: 5px;
}

Upvotes: 4

Views: 59873

Answers (1)

Rick Calder
Rick Calder

Reputation: 18695

input[type="text"]:focus{
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border:1px solid #5AB0DB;
}

input[type="text"]:hover{
border: 1px solid #999;
border-radius: 5px;
}

input[type="text"]:focus:hover{
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border:1px solid #5AB0DB;
border-radius:0;

}    ​

http://jsfiddle.net/calder12/jCaGp/1/

I STRONGLY suggest setting the type as above otherwise every input element (buttons, selects, etc) will take on these effects.

Upvotes: 15

Related Questions