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

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样式之后，以便覆盖它们。框阴影设置为无。不知道您是否还希望消除焦点上的蓝色边框，所以我也做了更改。

<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">