Question

input[type="email"]:hover {
    border-color: #848484;
}

input[type="email"]:active {
    border-color: #0174DF;
}

input[type="email"]:focus {
    border-color: #0174DF;
}

我想在Google搜索上设置一个input，当光标过度输入（不是焦点）时，边框的颜色变暗（我用:hover制作了这个），当我点击输入现在变为蓝色时，但是当我发布点击时颜色会回到:hover状态，我该怎么做？

Answer 1

这是解决方案：

input[type="email"] {
    outline: none;
    background-color: white;
    border: solid #A4A4A4;

}

input[type="email"]:hover {
    border-color: #939393;
}   

input[type="email"]:focus {
    border-color: #0080FF;
}

在google.com上输入相同的内容

如何在输入中添加悬停状态？

1 个答案: