twitter-bootstrap 边框颜色属性用作样式，而不是 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13487303/
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
border-color property works as style, not as css class
提问by mfanto
I'm sure this is a simple problem, but I can't seem to get a css class to work. I'm trying to add a red border around a text input. If I set the border-color property inline, everything works:
我确定这是一个简单的问题，但我似乎无法让 css 类工作。我正在尝试在文本输入周围添加红色边框。如果我内联设置 border-color 属性，则一切正常：
<input type="text" placeholder ="Name" style="border-color: #b94a48;" />
If I add a class to the surrounding div, targeting inputs, it works correctly:
如果我向周围的 div 添加一个类，定位输入，它可以正常工作：
.error-style input {
border-style:solid;
border-color: #b94a48;
}
<div class="control-group error-style">
<div class="controls">
<input type="text" placeholder ="Name"/>
</div>
</div>
But if I just make it a class, and add it to the input, it doesn't show:
但是，如果我只是将其设为一个类，并将其添加到输入中，则不会显示：
.error-style {
border-style:solid;
border-color: #b94a48;
}
<input type="text" placeholder ="Name" class="error-style" />
I'm not sure if it matters, but I'm also using Twitter Bootstrap in the project. The CSS file for Bootstrap can be found here
我不确定这是否重要，但我也在项目中使用 Twitter Bootstrap。可以在此处找到 Bootstrap 的 CSS 文件
回答by Naveen Sharma
In bootstrap.css line no 1013it is making your input border color grey
在 bootstrap.css第 1013 行，它使您的输入边框颜色变灰
to solve that use following css
解决使用以下css
.controls .error-style{border-style:solid;border-color: #b94a48;}
This way you are making high precedence value for this class. This way is far better than using !important.
通过这种方式，您可以为该类设置高优先级值。这种方式比使用 !important 好得多。
I hope it clear your issue :)
我希望它能解决你的问题:)
回答by Rahul Malu
Try to add the source to bootstrap.css file before the source to your custom css.
尝试在将源添加到自定义 css 之前将源添加到 bootstrap.css 文件。
<link href="bootstrap.css" rel="stylesheet" />
<link href="yourCustom.css" rel="stylesheet" />
//yourCustom.css
//你的自定义.css
.error-style {
border: 1px solid #b94a48 !important;
}
CSS rendering is cascading. The values provided latest are applied to the elements. The new values will not work only in case the old values are marked as !important.
CSS 渲染是级联的。最新提供的值应用于元素。只有在旧值被标记为 !important 的情况下，新值才会起作用。
回答by rink.attendant.6
A width is required for the border. If that doesn't work, try applying importanceto your CSS class as there may be something in the other CSS overriding it:
边框需要宽度。如果这不起作用，请尝试将重要性应用于您的 CSS 类，因为其他 CSS 中可能有某些内容覆盖了它：
.error-style {
border: 1px solid #b94a48 !important;
}
<input type="text" placeholder="Name" class="error-style" />
回答by chovy
You need a width:
你需要一个宽度：
.error-style input {
border-style:solid;
border-color: #b94a48;
border-width: 1px;
}
or simply:
或者干脆：
.error-style input {
border: 1px solid #b94a48;
}
回答by Rohit Vyas
use:
利用：
.error-style
{
border:2px solid #b94a48;
}
<input type="text" placeholder ="Name" class="error-style" />
You can change the widht of border as per your requirement.
您可以根据需要更改边框的宽度。
