我希望我的搜索框保持不透明度：处于活动状态时为 100%

Question

当我将光标拖出顶部导航栏时，搜索框将再次变为不透明度：70%。希望它保持不透明度 100% 一旦我单击搜索框，即使我将光标拖出它。

input[type="text"] {
border-radius: 25px;
height: 20px;}
input[type="text"]:focus {
border-radius: 25px;
height: 20px;
outline: none;
opacity: 100%;}
input[type="text"]:active {
opacity: 100%;}

Answer 1

你可以使用JavaScript来做到这一点。使用鼠标悬停事件更改鼠标悬停在导航栏上时的不透明度。并使用对焦事件在不透明度变脏后永久更改不透明度。

<input type="text" onfocus="dirtyStyle(this)">
<script>
function dirtyStyle(x) {
x.style.opacity = ".6";
}
</script>