单击时删除输入突出显示的框

Question

我试图在点击输入时删除下图中突出显示的蓝色框。它不工作。这里有什么问题？

<link href="css/bootstrap-v3.5.5.min.css" rel="stylesheet" type="text/css">

<input type="text" class="form-control" placeholder="Enter here" readonly>

在css、

.form-control:focus {
    outline: none;
}

Answer 1

首先，确保您的样式出现在 Bootstrap 样式之后，以便覆盖它们。 box-shadow 设置为 none。不确定您是否也希望在焦点上移除蓝色边框，所以我也更改了它。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>
  .form-control:focus {
    box-shadow: none;
    border: 1px solid #ccc;
  }
</style>
<input type="text" class="form-control" placeholder="Enter here">

单击时删除输入突出显示的框

Remove the input highlighted box on click

css

input

border

twitter-bootstrap

twitter-bootstrap-3