css Question posted in
Some basic documentation can be found here.

Css – :Focus not applying but other other none related styles are

So I am making a website for a school project and I have multiple inputs on that website that have the same class (the class is called "in") because I want to apply the same styles to all of them but I want the border-color to change while the input is selected (:focus), but instead the styles that I chose, some other styles are applying which set the border width to 2px and the color to black, which I don’t want.

here’s the css code that can affect the ".in" class’s style:

.in:focus, .in:hover, .in:active{
  border-width: 1px;
  border-color: #002f86 !important;
}
.in {
  display: block;
  margin-top: 20px;
  font-family: roboto;
  width:178px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(254,196,58,255);
  height: 20px;
  font-size: 15px;
  border-radius: 10px;
  padding-left: 6px;
}

I tried this:

in:focus, .in:hover{
  border-width: 1px;
  border-color: #002f86 !important;
}

and I expected that while hovering or focusing, the border styles change. The hover part works just fine but the focus isn’t working, but instead it’s setting border width to 2px and color to black

Tags:

2

Answers


  1. 0

    I would avoid messing with the focus default styles. You could use outline instead?

    .in:focus {
  outline: 1px solid #002f86;
}
    Login or Signup to reply.
  2. 0

    Browsers have some default styles for input:focus.
    I think you’re misinterpreting outline as border.

    You can remove browser’s default outline by doing something like this:

    .in:focus {
  outline: none;
}

    So the final code will look like this:

    .in:focus, .in:hover{
  outline: none;

  border-width: 1px;
  border-color: #002f86 !important;
}

    But be aware that you should never completely remove focus styles. You should always have a distinct styles for :focus in order to respect accessibility concerns.
    For more information please refer to this article on MDN website.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search