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>

我必须添加什么才能覆盖此效果？

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

对我来说，在Mac 26的chrome 26上，我通过将“outline”更改为none来修复此问题。

（Andy回答的另一个不同之处在于我的问题出在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 ;
}

对于Jquery UI按钮，如何在焦点上移除蓝光？

3 个答案: