:focus is the same as :focus-visible

How can I make this work?

<input type="text">

<input type="text">

input:focus {
  background-color: red;
}

input:focus-visible {
  background-color: blue;
}

input:focus {
  background-color: red;
}

input:focus-visible {
  background-color: blue;
}

Basically I want the input to have a blue bg when it's focused by tab, and when it's focused normally, it should be red. Right now, it's always blue due to the order or the styles, how can i fix it?

1 Reply

MarkBoots•3mo ago

i don't think it is possible with css alone. with js you could do something like this

<input type="text" onpointerdown="clickFocus(this)">

<input type="text" onpointerdown="clickFocus(this)">

input:focus-visible {
  background: blue;
}
input[data-click-focus = 'true']{
  background: red;
}

input:focus-visible {
  background: blue;
}
input[data-click-focus = 'true']{
  background: red;
}

function clickFocus(el){
  el.dataset.clickFocus = true;
  el.addEventListener('blur', function blurInput(){
    el.dataset.clickFocus = false;
    el.removeEventListener('blur', blurInput)
  });
}

function clickFocus(el){
  el.dataset.clickFocus = true;
  el.addEventListener('blur', function blurInput(){
    el.dataset.clickFocus = false;
    el.removeEventListener('blur', blurInput)
  });
}

Maybe there are better solutions, so wait for other suggestions as well.

Gaming

Programming

:focus is the same as :focus-visible