在 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;
}