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)。