TextBox CSS Hover/Focus

css, styles, textbox

Solution

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.

Problem

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; } ```

Original source