CODEWITHSUNDEEP
css
Marcelo Retana
Marcelo Retana

Reputation: 47

How to remove the default blue border of the buttons once yo do onblur?

youtubevolumebar

I was on YouTube and randomly playing with the tab button on my Mac, and I see that they are styling the buttons of the navigation bar below the videoplayer, I mean, when you do the onblur, the default blue color on the borders dissapear, and there you will see a yellow border instead.

How can I do it with css?

Check the image http://screencast.com/t/hXbNEG5jR5o.

Upvotes: 0

Views: 248

Answers (1)

Karmacoma
Karmacoma

Reputation: 668

At the same time, Youtube is a HTML5 player. So, you can apply CSS on the player.

Sound area class is ytp-volume-hover-area and its 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>

You can apply CSS via !important if player has on your website. It is not a good solution but it is a solution.

Upvotes: 1

Related Questions