Html 如何在引导程序 4 中删除轮廓
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48483925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove outline in bootstrap 4
提问by Sandeep
I want to remove textbox outline in bootstrap 4but its not working. please let how can i remove this line.
我想删除bootstrap 4中的文本框轮廓，但它不起作用。请让我如何删除这条线。
CSS
CSS
#content #main-content input[type=text]{
border: 0;
border: 1px solid #ccc;
height: 40px;
padding-left: 10px;
outline: 0;
}
html
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>
采纳答案by tao
The theme you're using sets box-shadowto inset 0 -2px 0 #2196F3on focus.
您使用的主题设置box-shadow为inset 0 -2px 0 #2196F3on 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:
您需要覆盖它，但不能使用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;
}
Also note you need to load this CSS after Bootstrap CSS and the theme you're loading.
另请注意，您需要在 Bootstrap CSS 和您正在加载的主题之后加载此 CSS。
回答by John Dibling
You can add the shadow-noneBootstrap class to remove the focus outline:
您可以添加shadow-noneBootstrap 类来移除焦点轮廓：
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control shadow-none" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
回答by Luuk Skeur
As the accepted answer works it isn't the best option. You could simply override the input/button outline by editing the variables. (as the question specifically asks for bootstrap 4)
由于接受的答案有效，因此它不是最佳选择。您可以通过编辑变量简单地覆盖输入/按钮轮廓。（因为问题专门针对引导程序 4）
If you override the Bootstrap 4 variables like so. You could use the following code to disable allfocus outlines:
如果您像这样覆盖 Bootstrap 4 变量。您可以使用以下代码禁用所有焦点轮廓：
$input-btn-focus-box-shadow: none;
$input-btn-focus-box-shadow: none;
For only disabling the button focus outline use the follow code:
要仅禁用按钮焦点轮廓，请使用以下代码：
$btn-focus-box-shadow: none;
$input-btn-focus-width: 0;
This you could also be done for indicators, select, dropdown etc. Just search the default variables list of bootstrap 4
您也可以为指标、选择、下拉等完成此操作。只需搜索bootstrap 4的默认变量列表
回答by Bhuwan
You have to remove your box-shadowon input:focus.
你必须删除你box-shadow的input:focus.
Write this css in your custom css file below the bootstrap css to override. It will be good practice if you use your custom parent class.
将此 css 写入引导 css 下方的自定义 css 文件中以进行覆盖。如果您使用自定义父类，这将是一个很好的做法。
.parent-class .form-group input[type=text]:focus,
.parent-class .form-group [type=text].form-control:focus, {
box-shadow: none;
}
回答by Yazeed Zaid
this is better, shorter, and greater
这是更好，更短，更大
input[type="text"], textarea {
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
回答by Mohammed Elbalkini
as far as i see from your css, you set the border to 0 then again to 1. replace it as below
据我从您的 css 中看到，您将边框设置为 0，然后再次设置为 1。将其替换如下
#content #main-content input[type=text]{
border: 1px solid #ccc;
border: 0;
height: 40px;
padding-left: 10px;
outline: 0;
}
回答by merko
Add this on input: focus
添加这个 input: focus
-webkit-box-shadow: none;
box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
background-color: rgb(250,250,250);
