如何在引导程序 4 中删除轮廓 [英] How to remove outline in bootstrap 4

问题描述

我想删除 bootstrap 4 中的文本框轮廓，但它不起作用.如何删除此行?

CSS

#content #main-content input[type=text]{边框:0；边框:1px 实心 #ccc；高度:40px；左边距:10px；大纲:0；}

html

<label for="title">Title <span>*</span></label><输入类型=文本"类=表单控制"id=标题"名称=标题"占位符=输入标题">

解决方案

您使用的主题将 box-shadow 设置为 inset 0 -2px 0 #2196F3焦点.

您需要覆盖它，但不能使用 none，因为那样只会删除它.您可能希望它在未聚焦时保持相同的值.简而言之，你需要这个:

textarea:focus,textarea.form-control:focus,input.form-control: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 {框阴影:插入 0 -1px 0 #ddd；}

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

I want to remove textbox outline in bootstrap 4 but its not working. How can I remove this line?

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>

解决方案

The theme you're using sets box-shadow to inset 0 -2px 0 #2196F3 on focus.

You need to override it, but not with none, because that would just remove it. You probably want it to remain at same value like when it's not focused. In short, you need this:

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

Also note you need to load this CSS after Bootstrap CSS and the theme you're loading.

这篇关于如何在引导程序 4 中删除轮廓的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！