TextBox CSS Hover / Focus

时间:2012-10-24 19:20:41

标签: css textbox styles

我在焦点上的文本框中添加了一个漂亮的盒子轮廓,但是想要在悬停时添加灰色轮廓,但我遇到了一个问题。我没有在未选中文本框时显示悬停框。有什么办法吗?谢谢。 =)

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

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

1 个答案:

答案 0 :(得分:11)

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/

我强烈建议如上所述设置类型,否则每个输入元素(按钮,选择等)都会产生这些效果。