css - 一旦你做了 onblur，如何删除按钮的默认蓝色边框？

Question

youtubevolumebar

我在 YouTube 上随机播放我 Mac 上的选项卡按钮，我看到他们正在为视频播放器下方的导航栏按钮设置样式，我的意思是，当您执行 onblur 时，默认的蓝色边框消失，您会看到黄色边框。

如何使用 css 实现？

查看图片http://screencast.com/t/hXbNEG5jR5o .

Answer 1

同时，Youtube 是一个 HTML5 播放器。因此，您可以在播放器上应用 CSS。

声音区域类是 ytp-volume-hover-area 及其 HTML:

<span class="ytp-volume-hover-area" draggable="true" style="-webkit-user-drag: none;"><div class="ytp-volume-control" draggable="true" style="-webkit-user-drag: none;"><div class="ytp-button ytp-button-volume" role="button" tabindex="6100" aria-label="sesi aç değiştir" data-value="off"></div><div class="ytp-volume-panel" role="slider" aria-valuemin="0" aria-valuemax="100" tabindex="6200" aria-valuenow="85" aria-valuetext="85% ses düzeyi sessiz"><div class="ytp-volume-slider" draggable="true" style="-webkit-user-drag: none;"><div class="ytp-volume-slider-foreground" style="left: 0px;"></div></div></div></div><div class="ytp-time-display html5-control" aria-hidden="true"><span class="ytp-time-current">0:03</span><span class="ytp-time-separator"> / </span><span class="ytp-time-duration">2:15</span><span class="ytp-time-live-badge">Live</span></div></span>

如果播放器在您的网站上，您可以通过 !important 应用 CSS。这不是一个好的解决方案，但它是一个解决方案。