1 reply

:focus is the same as :focus-visible

How can I make this work?

<input type="text">

<input type="text">

<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;
}

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?

:focus is the same as :focus-visible

Similar Threads

Similar Threads

Similar Threads