Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-4

Bootstrap 4 makes outline not work

How does Bootstrap disable the HTML outline property? When I add the form control class to my input, "outline: none;" no longer works.

<input class="form-control" style="outline:none;">

codepen: https://codepen.io/Eli92/pen/WXXbRa

I can just use my own css class for this input, but I want to know what's happening here, and I'm too much of a beginner to submit a bug report.

The reason I want to remove the outline is to add my own to an outer element, like Youtube and most popular sites do for their search bar.

Solution

  • Actually, a border and box-shadow are applied to every form-control when focused, so setting

    .form-control:focus {
  border: none;
  box-shadow: none;
}

    should remove the styling