javascript - 停止 Bootstrap 组按钮以保持专注

Question

如何防止按钮在被点击后保持焦点？

HTML

<div class="container">
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

 body {
    margin: 10px;
}

请看我在这个 Fiddle 中的意思.

我知道我可以通过将样式应用于 anchor 来解决这个问题 <a>而不是按钮，但我不能那样做，因为我必须保留以下原始 asp.net控制。

<asp:Button ID="SearchResultsPDF"  runat="server" Text="PDF Report" CssClass="btn btn-default" OnClick="PDFReport_Click" />

<asp:Button id="SearchResultsCSV" runat="server" Text="CSV Report" CssClass="btn btn-default" onClick="CSVReport_Click"></asp:Button>

我也看到了this solution使用 jQuery，效果很好，但似乎太具体了。

jQuery

$(".btn").mouseup(function(){
    $(this).blur();
})

我想知道是否有仅 CSS 的解决方案，我很感激关于如何做到这一点的一些指导。谢谢。

Answer 1

如果您不想使用那个 jquery 片段，并且您不能添加一个类。我能想到的唯一选择是覆盖 :focus 的样式。

.btn-default:focus {
    background-color: #fff;
    border-color: #ccc;
}

理想情况下，您希望使用自己的类，但这取决于您是否能够将类添加到 asp:Button。