How to remove outline in bootstrap 4

问题

I want to remove textbox outline in bootstrap 4 but its not working. please let how can i remove this line.

CSS

#content #main-content input[type=text]{
   border: 0;
   border: 1px solid #ccc;
   height: 40px;
   padding-left: 10px;
   outline: 0;
 }

html

<div class="form-group">
   <label for="title">Title <span>*</span></label>
   <input type="text" class="form-control" id="title" name="title" placeholder="Enter Title">
</div>

回答1:

The theme you're using sets box-shadow to inset 0 -2px 0 #2196F3 on focus.

You need to override it, but not with none, because that would just remove it. You probably want it to remain at same value like when it's not focused. In short, you need this:

textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}

Also note you need to load this CSS after Bootstrap CSS and the theme you're loading.

回答2:

You can add the shadow-none Bootstrap class to remove the focus outline:

<div class="form-label-group">
  <input type="password" id="inputPassword" class="form-control shadow-none" placeholder="Password" required>
  <label for="inputPassword">Password</label>
</div>

回答3:

As the accepted answer works it isn't the best option. You could simply override the input/button outline by editing the variables. (as the question specifically asks for bootstrap 4)

If you override the Bootstrap 4 variables like so. You could use the following code to disable all focus outlines:

$input-btn-focus-box-shadow: none;

For only disabling the button focus outline use the variable $btn-focus-box-shadow

This you could also be done for indicators, select, dropdown etc. Just search the default variables list of bootstrap 4

回答4:

You have to remove your box-shadow on input:focus.

Write this css in your custom css file below the bootstrap css to override. It will be good practice if you use your custom parent class.

.parent-class .form-group input[type=text]:focus,
.parent-class .form-group [type=text].form-control:focus, {
  box-shadow: none;
}

回答5:

as far as i see from your css, you set the border to 0 then again to 1. replace it as below

#content #main-content input[type=text]{
 border: 1px solid #ccc;
 border: 0;
 height: 40px;
 padding-left: 10px;
 outline: 0;
}

回答6:

Add this on input: focus

 -webkit-box-shadow: none;
box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
background-color: rgb(250,250,250);

来源：https://stackoverflow.com/questions/48483925/how-to-remove-outline-in-bootstrap-4

标签

html

css

bootstrap-4