Question

我确定这是一个简单的问题，但我似乎无法让css课程发挥作用。我试图在文本输入周围添加红色边框。如果我将border-color属性设置为内联，则一切正常：

 <input type="text" placeholder ="Name" style="border-color: #b94a48;" />

如果我向周围的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>

但如果我只是把它作为一个类，并将其添加到输入中，它就不会显示：

.error-style {
    border-style:solid;
    border-color: #b94a48;
}

<input type="text" placeholder ="Name" class="error-style" />

我不确定这是否重要，但我也在项目中使用Twitter Bootstrap。可以找到Bootstrap的CSS文件here

Answer 1

在bootstrap.css 第1013行中，它使您的输入边框颜色为灰色

解决使用以下css

.controls .error-style{border-style:solid;border-color: #b94a48;}

这样，您可以为此类设置高优先级值。这种方式比使用！important更好。

我希望明确你的问题：）

Answer 2

边框需要宽度。如果这不起作用，请尝试将重要性应用于CSS类，因为其他CSS中的某些内容可能会覆盖它：

.error-style {
    border: 1px solid #b94a48 !important;
}

<input type="text" placeholder="Name" class="error-style" />

Answer 3

你需要一个宽度：

.error-style input {
    border-style:solid;
    border-color: #b94a48;
    border-width: 1px;
}

或简单地说：

.error-style input {
    border: 1px solid #b94a48;
}

Answer 4

使用：

.error-style
    {
        border:2px solid #b94a48;
    }

<input type="text" placeholder ="Name" class="error-style" />

您可以根据需要更改边框的宽度。

Answer 5

你应该写下面提到的风格和工作正常......

<强> CSS

.error-style {
      border:2px solid #b94a48;
}

<强> HTML

<input type="text" placeholder="Name" class="error-style" />

<强> DEMO

Answer 6

尝试将源添加到bootstrap.css文件之前，将源添加到自定义css。

<link href="bootstrap.css" rel="stylesheet" />
<link href="yourCustom.css" rel="stylesheet" />

// yourCustom.css

.error-style {
    border: 1px solid #b94a48 !important;
}

CSS渲染是级联的。最新提供的值将应用于元素。仅当旧值标记为！important。

时，新值才会起作用

border-color属性用作样式，而不是css类

6 个答案: