停止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;
}

请看看我在这个小提琴里的意思.

我知道我可以通过将样式应用于锚点<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>

我也看到了这个解决方案与jQuery,它工作正常,但它似乎太具体.

jQuery的

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

我想知道是否只有一个CSS解决方案,我很欣赏如何做到这一点的一些方向.谢谢.

Answer 1

如果您不想使用该jquery片段,则无法添加类.我能想到的唯一选择是覆盖样式:focus.

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

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