Question

我想删除 bootstrap 4 中的文本框大纲但不起作用。请让我如何删除这一行。

CSS

#content #main-content input[type=text]{
   border: 0;
   border: 1px solid #ccc;
   height: 40px;
   padding-left: 10px;
   outline: 0;
 }

HTML

<div class="form-group">
   <label for="title">Title <span>*</span></label>
   <input type="text" class="form-control" id="title" name="title" placeholder="Enter Title">
</div>

Answer 1

您正在使用的主题将box-shadow设置为inset 0 -2px 0 #2196F3上的focus。

您需要覆盖它，但不能覆盖none，因为这只会删除它。你可能希望它保持相同的值，就像它没有集中注意力一样。简而言之，你需要这个：

textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}

另请注意，您需要在Bootstrap CSS和您正在加载的主题后加载此CSS。

Answer 2

您可以添加shadow-none Bootstrap类来删除焦点轮廓：

<div class="form-label-group">
  <input type="password" id="inputPassword" class="form-control shadow-none" placeholder="Password" required>
  <label for="inputPassword">Password</label>
</div>

Answer 3

由于接受的答案有效，因此不是最好的选择。您可以通过编辑变量来简单地覆盖输入/按钮轮廓。（因为问题特别要求引导4）

如果覆盖Bootstrap 4变量like so。您可以使用以下代码禁用所有焦点大纲：

$input-btn-focus-box-shadow: none;

仅禁用按钮焦点轮廓时，请使用变量$btn-focus-box-shadow

这也可以用于指标，选择，下拉等。只需搜索默认variables list of bootstrap 4

Answer 4

您必须删除box-shadow上的input:focus。

将此css写入bootstrap css下面的自定义css文件中以覆盖。如果您使用自定义父类，这将是一个好习惯。

.parent-class .form-group input[type=text]:focus,
.parent-class .form-group [type=text].form-control:focus, {
  box-shadow: none;
}

Answer 5

一个非常简单的解决方案是这样的，

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

我们覆盖了 .form-control bootstrap 类。我遇到了同样的问题，我使用这个技巧解决了这个问题，这样我们就不必考虑在引导程序之后导入 CSS 或类似的东西。注意：#0d6efd 是我想在输入元素获得焦点时赋予它的颜色。

Answer 6

使用 box-shadow 不会完全隐藏按钮中的轮廓，并且它不适用于输入、文本框和其他表单控件.. . 使用 shadow-none 可能会有一个细小的边框，但它比以前的解决方案要好得多......如果您需要帮助，这里是代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form action="/search" method="get">
  <center class="container">
    <div class="input-group mb-3">

      <input type="text" class="form-control shadow-none" placeholder="Search the web" aria-label="Username" aria-describedby="basic-addon1" required name="q" autocomplete="off">
      <input type="submit" class="btn input-group-text shadow-none" id="basic-addon1" value="search">
    </div>
  </center>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

Answer 7

这更好，更短，更大

input[type="text"], textarea {
              outline: none;
              box-shadow:none !important;
              border:1px solid #ccc !important;
                                                 }

Answer 8

下面的代码现在只对我有用，我当然希望它也能帮助其他人..

.form-group input:focus{
     outline:0px !important; 
     box-shadow: none !important;
  }

Answer 9

这一行，摘自@tao 在添加 css 样式时起作用：

但是，插图应该为零。（它会在最新的 Bootstrap 4 中创建一个奇怪的行。）

<input type="radio" style="box-shadow: inset 0 0 0 #ddd;">

'shadow-none' 不再起作用。

Answer 10

就我从你的css看到的那样，你将边框设置为0然后再设置为1.将其替换为如下所示

#content #main-content input[type=text]{
 border: 1px solid #ccc;
 border: 0;
 height: 40px;
 padding-left: 10px;
 outline: 0;
}

Answer 11

在input: focus

上添加此内容

 -webkit-box-shadow: none;
box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
background-color: rgb(250,250,250);

如何删除bootstrap中的轮廓4

11 个答案: