Html 对于Jquery UI按钮，如何删除焦点上的蓝色发光？

我正在使用jQueryUI。我有一个按钮，我已替换为背景图像。jQueryUI会在焦点上的按钮周围放置一个圆形的光晕。我想覆盖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中添加什么来覆盖此效果？

恐怕您必须编辑CSS：

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

---

对我来说，在Chrome26forMac上，我通过将“大纲”改为“无”来解决这个问题

（Andy回答的另一个不同点是，我的问题是ui滑块手柄，而不是ui btn）：

---

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

/* Disable jQuery UI focus glow */

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

---

这样，您就不需要跟踪每个单独的ui焦点选择器（即，ui btn焦点、.ui选项卡焦点、.ui手风琴焦点..等等）。

非常感谢您完成了这个技巧，这就是我要寻找的，要覆盖的正确类。如果你碰巧读到了这个回复，有没有什么方法可以让我知道。我应该去哪里学习呢？您可以在大多数浏览器中检查元素，每个浏览器都有自己的实现方式。假设您使用的是chrome，右键单击元素并选择Inspect element。现在，您可以找到关于该元素的信息，包括它的ID和类在MacOSX上的Safari和Chrome中为我工作。

/* Disable jQuery UI focus glow */

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