I can't get rid of the blue line in the input fields

Question

I'm learning Bootstrap 5. I can't figure out how to completely get rid of the blue line when the input field is focused

<div class="container">
<div class="row">
    <div class="col-12">
        <div class="input-group flex-nowrap mt-5">
            <span class="input-group-text" id="addon-wrapping">@</span>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
        </div>
    </div>
</div>

.input-group input {
  &:focus {
    outline: none !important;;
    box-shadow: none;
  }
}

Please help, I can't understand

Did you try https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element — epascarello, Sep 22 '22 at 20:47
Not sure why but the `&:focus` syntax isn't working in this case. Changing to `.input-group input:focus` is all you need for it to work. (The extra semi-colon is wrong after `important` but it's not the problem.) — Bman70, Sep 22 '22 at 21:05

score 1 · Answer 1 · answered Sep 22 '22 at 20:53

That blue line is a border color that is set when the input is focused. To get rid of it, just override the :focus state of the input and set your own color, presumably the color that is set when the input is not focused which is #ced4da (see BS5 source code).

Also, to remove the shadow, you can use Bootstrap's shadow-none on your input element.

.input-group input:focus {
  border-color: #ced4da;
  /** override and keep the original border color */
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="input-group flex-nowrap mt-5">
        <span class="input-group-text" id="addon-wrapping">@</span>
        <!-- added "shadow-none" class to the input -->
        <input type="text" class="form-control shadow-none" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
      </div>
    </div>
  </div>
</div>

As a sidenote, I recommend keeping, at least, the border without overriding as it gives a visual feedback that the input is now focused.

score 1 · Answer 2 · answered Sep 22 '22 at 21:05

As others mentioned already, you need to reset the border-color and box-shadow.

You can do it by adding these 2 classes to the .form-control:

border shadow-none

A snippet:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
    <div class="col-12">
        <div class="input-group flex-nowrap mt-5">
            <span class="input-group-text" id="addon-wrapping">@</span>
            <input type="text" class="border shadow-none form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
        </div>
    </div>
</div>

Also as a side note, please be aware that this blue border is important for Accessibility reasons, so if you removing it, please make sure that you highlight the selected input in some other way.

Here's a bit more on the accessibility part, and why the default uses not only color but other changes to indicate focus: https://www.a11yproject.com/posts/never-remove-css-outlines/ — Bman70, Sep 22 '22 at 21:21

score 0 · Answer 3 · answered Sep 22 '22 at 20:49

Bootstrap 5 has their own CSS stylesheet that contains this:

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

The blue is coming from the border color attribute in here. Try adding this to your CSS and it should fix your issue:

.input-group input {
  &:focus {
    outline: none !important;
    box-shadow: none;
    border-color: #ced4da; /* <- this line here */
  }
}

#ced4da; is the default color of the bootstrap input border, so this should make the input no longer change color on focus.

I can't get rid of the blue line in the input fields

3 Answers3