Question

我使用Tab键到达我的按钮，然后当它进行焦点时，我希望它改变颜色，以便它显示你已经到达按钮，当你按下回车键时，它应该改变它的颜色原创。

<div style="position: absolute; margin: 0; left: 0; bottom: 0">
            <input id=" vehicles" class="button calculator large top-right-border transition" type="submit" name="submit"   />
        </div>

和CSS是

#vehicles:hover{
     background: red;
}
#vehicles:focus{
     background: red;
}
#vehicles{
     background: green;
}

按下输入后，我希望我的颜色恢复为绿色。

Answer 1

使用：活动赢了将它恢复为绿色状态。您可能需要使用JavaScript来取消按钮的重点。

<input id="vehicles" type="submit" onkeypress="if (event.which === 13) this.blur()" />

Answer 2

在vehicles元素的id作业中，左括号和input之间有空格，因此您的CSS样式不适用于它。它应该是

<input id="vehicles".../>

而不是

<input id=" vehicles".../>

Demo

Answer 3

我认为你应该使用：active而不是：focus。它将为您提供所需的解决方案

<input id="vehicles" class="button calculator large top-right-border transition" type="submit" name="submit"   />


#vehicles:hover{
     background: red;
}
#vehicles:active{
     background: red;
}
#vehicles{
     background: green;
}

找到JSFIDDLE

它会为你工作。使用jQuery进行焦点散焦。更多请通过

http://api.jquery.com/focusout/

Answer 4

希望它有所帮助，

 <html><body>

<input type="submit" 
       id="vehicles" 
       style="background-color:red;" 
       onfocus ="change_color()"/>

    <script>
        function change_color()
        {
            document.getElementById("vehicles").style.backgroundColor="Blue";
        }
    </script>
    </body>

    </html>`

使用Tab键改变焦点颜色的按钮，按下回车键返回原始颜色

4 个答案: