0

我确定这是一个简单的问题，但我似乎无法让 css 类工作。我正在尝试在文本输入周围添加红色边框。如果我将边框颜色属性设置为内联，一切正常：

 <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 文件可以在这里找到

4

6 回答 6

2

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

解决使用以下css的问题

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

这样，您就可以为此类设置高优先级值。这种方式比使用 !important 要好得多。

我希望它能解决你的问题:)

于 2012-11-21T07:57:55.973 回答
0

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

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

<input type="text" placeholder="Name" class="error-style" />
于 2012-11-21T06:04:40.397 回答
0

你需要一个宽度：

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

或者简单地说：

.error-style input {
    border: 1px solid #b94a48;
}
于 2012-11-21T06:06:03.980 回答
0

采用：

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

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

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

于 2012-11-21T06:22:54.643 回答
0

你应该像下面提到的那样写，它的工作正常......

CSS

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

HTML

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

演示

于 2012-11-21T06:40:38.710 回答
0

尝试将源添加到 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 时，新值才会起作用。

于 2016-06-09T09:49:51.207 回答