在Bootstrap 4中单击输入字段内部时如何删除/更改边框？

Question

我用过这个但是没用。

input[type="email"],
input[type="password"],
textarea,
select {
    outline: none;
}

Answer 1

这些样式禁用蓝色：

如果您使用包含form-control类（Bootstrap方式）的所有字段的表单，我们可以为焦点事件覆盖这些内容：

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Answer 2

使用下面的CSS删除Bootstrap 3和4中的大纲。这将删除包含input类的所有form-control字段的大纲。如果您要将其应用于特定的input字段，请使用其id代替form-control类。

.form-control:focus{
    border-color:#CCC;
    outline:0;
    -webkit-box-shadow:none;
    box-shadow:none;
}

Answer 3

使用这个 -

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