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

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

使用：active不会将其恢复为绿色状态。 您可能需要使用JavaScript来取消对按钮的聚焦。

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

Answer 2

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

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

而不是

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

演示

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 个解决方案

解决方案1
3 已采纳 2014-08-16 03:33:56

解决方案2
0 2014-08-16 03:21:23

解决方案3
0 2014-08-16 03:31:24

解决方案4
0 2014-08-16 03:53:19

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

问题描述

4 个解决方案

解决方案1 3 已采纳 2014-08-16 03:33:56

解决方案2 0 2014-08-16 03:21:23

解决方案3 0 2014-08-16 03:31:24

解决方案4 0 2014-08-16 03:53:19

解决方案1
3 已采纳 2014-08-16 03:33:56

解决方案2
0 2014-08-16 03:21:23

解决方案3
0 2014-08-16 03:31:24

解决方案4
0 2014-08-16 03:53:19