时间戳

首页 > 解决方案 > 单击时删除输入突出显示的框

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

问题描述

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

在此处输入图像描述

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

标签： csstwitter-bootstrapinputtwitter-bootstrap-3border

解决方案

首先，确保您的样式出现在您的 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">

推荐阅读