Problem with my Pomodoro Clock buttons

Problem with my Pomodoro Clock buttons
0

#1

Hi all,

Have a small problem with the plus/minus buttons on my Pomodoro Clock. For some reason, after you click on either one and release the mouse button, there is a very faint light blue border around the button…or maybe the span on top of it.

CodePen is here: http://codepen.io/tlannoye11/pen/wdEPxK?editors=0100

I’ve looked through my CSS, but I can’t find out what might be causing it. I tried copying the functionality from my Calculator app, and I’ve confirmed that the buttons on that app with similar functionality are not doing this, or at least not that I can see. Any help on this would be appreciated.


#2

See this answer on Stack Overflow. In your case, it’d be something like this:

.btn:focus {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
}

However, bear in mind that the focus styling is there for a purpose and improves usability and accessibility (especially for those using a keyboard to navigate your site rather than a mouse). Because of this, you shouldn’t remove it unless you have a viable alternative to show where the focus is. Perhaps you could style the span within .btn, something like this:

.btn:focus span {
  background: #0f0;
  color: #000;
}

#3

If that’s the case, why didn’t it do the same thing on the buttons for my Calculator project? Link: https://codepen.io/tlannoye11/pen/LydLaR


#4

Took me a while to work this one out.

It’s because your calculator is using Bootstrap 3.3.7 and your pomodoro clock is using Bootstrap 4.0.0. Seems like only 4.0.0 specifies a :focus style.

In addition, it seems like browsers (maybe only some browsers?) have different behavior on focus when a :focus style is specified - they make the focus visible whenever the focus is on the element. When no style is specified, on the other hand, they show the focus only after the user has started using the keyboard to browse the page (using Tab to cycle through focusable elements), and from then on continue to show it until the user navigates away from the page or refreshes.

tl;dr version: because the Web is a disorganized mishmash of technologies with poorly enforced standards.


#5

Ah jeez, I had the same problem back in basic algorithms. Took me almost the same amount of time to find it then. Ugh! Gotta remember that one.