单击按钮后如何保持焦点css样式（单击任意位置后样式消失）答案

【问题标题】：How to keep focuse css style after clicking a button (the style disappears after clicking anywhere)单击按钮后如何保持焦点css样式（单击任意位置后样式消失）
【发布时间】：2016-06-12 17:50:25
【问题描述】：

我的脚本中有一个提交类型的输入标签。点击后如何保持专注的 CSS 样式？单击网页上的任意位置后，css 样式会消失。我希望按钮保持其 css 样式，直到我单击其他输入。

【问题讨论】：

标签： html css button

【解决方案1】：

        input[type=submit]:focus {
            background-color: lightblue;
        }

codepen URL 供参考-http://codepen.io/nagasai/pen/zBqGRK

【讨论】：

点击页面任意位置后背景色会消失。我希望按钮保持背景，直到我单击其他按钮。

【解决方案2】：

如果使用:focus，样式会在点击网页任意位置后消失。

我自己找到了一个例子，现在点击一个按钮后，如果我点击网页上的任何地方，除非我点击另一个按钮，否则该按钮将保持其样式。

<input type="submit" id="first" value="first"><br>
<input type="submit" id="second" value="second">


<script>
$(document).ready(function(){
    $("#first").click(function(){
        $(this).css("background-color", "red");
        $("#second").css("background-color", "transparent");
    });
    $("#second").click(function(){
        $(this).css("background-color", "red");
        $("#first").css("background-color", "transparent");
    });
});
</script>

【讨论】：