Google Chrome Showing Black Border on Focus State for Button User Agent Styles

Why does the internal css style of black outline on in-focus focusable elements, not apply on click+hold?

It is true that when you click on a focusable element it gets infocus as well, but your misconception is that the browsers internally apply the following css:

a:focus {
  outline: 2px solid black;
}

In reality the browsers use the focus-visible css property like this:

a:focus-visible {
  outline: 2px solid black;
}

focus-visible is a css4 level property recently introduced by most browsers(except safari). It has been designed specifically for what have you observed. This behaviour gets even more apparent in case of input fields(check out MDN's example), where you don't have to hold the click to see the result. In the case of anchor tags focus-visible applies style to only those elements who've been focused through the keyboard not the mouse. It should be noted that the button element behaves similar to a element, but the input element treats focus-visible identical to focus, that is even on click it gets the styles mention in input:focus-visible{...}.

Example:

input:focus-visible, button:focus-visible {
  outline: 2px dotted black;
}

<input type="text" value="Click/tab shows outline">

<button>Only tab shows outline</button>

Override user agent stylesheet on focus

#drip-first-name:focus, #drip-email:focus {
    outline: 0;
    border-bottom: 3px solid black !important;
}

make sure you prefix it for different browsers(Not sure if needed) and of course do the same for active etc (wherever you get that blue outline) . This will work for chrome.

However, a few notes. since you're messing with css you need to start using Chrome Devtools. It's free and built into chrome. This will show you what's wrong and how to fix it.

Secondly, using !important in css is not a major no no but the reason your border-bottom rule wasn't working was because you had already used !important in a previous class and it was picking it up. Important won't let you override anything unless it's lower in the CSS stylesheet and is also marked as important. Long story short at some point you will have to redo the whole thing if you keep using important.

this is how it would look to you with devtools open:

This is the link for you to get started with devtools:
Devtools

What does the `i` do in Chrome's user agent stylesheet for checkboxes/radios?

It makes the preceding attribute selector case-insensitive, so it matches <input type="RaDiO"> as well:

[attr operator value i]

Adding an i (or I) before the closing bracket causes the value to be
compared case-insensitively (for characters within the ASCII range).

From MDN

---

Related Topics