html - 对于 Jquery UI 按钮，如何消除焦点上的蓝色光芒？

Question

我正在使用 Jquery UI。我有一个用背景图片替换的按钮。JQuery UI 在焦点上的按钮周围放置一个圆形的光晕。我想覆盖 css 以使蓝色辉光不出现。

标记如下所示：

<form id="sliderUIContainer" class="noUIeffects">
 <label for="slider-0" class="ui-hidden-accessible">Input Slider</label>
 <input type="range" name="slider" id="slider-0" value="0" min="0" max="20" />
</form>

我必须在 CSS 中添加什么来覆盖此效果？

Answer 1

如果您想从所有jQuery UI 元素中移除发光，我建议您在 CSS 开头附近使用以下代码：

/* Disable jQuery UI focus glow */

*:focus {
    outline: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

这样，您将不需要跟踪每个单独的 ui-focus 选择器（即 .ui-btn-focus、.ui-tabs-focus、.ui-accordion-focus..ect）。

Answer 2

对我来说，在 chrome 26 for mac 上，我通过将“大纲”更改为无来解决此问题。

（与安迪回答的另一个区别是我的问题是在 ui-slider-handle 而不是 ui-btn 上）：

.ui-slider-handle:focus {
  outline: none;
}

Answer 3

恐怕您将不得不编辑CSS：

.ui-focus,
.ui-btn:focus {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none ;
}