0

我正在使用 Twitter Bootstrap 创建如下所示的表单元素。通常，“提交”应该放在“控件”容器之外，但对于我的布局，我需要它在里面，如下所示：

<div class="control-group">
    <div class="controls">
        <input type="text" name="email" value="" id="email" class="input-large email" placeholder="email" required="">  
        <input type="submit" value="submit" name="submit" id="submit" class="btn btn-success">
    </div>
</div>

当我将“错误”类添加到

<div class="control-group error">

“提交”按钮也得到了我不想要的样式。如果我将引导 CSS 修改为包含 :not([type='submit'])

.control-group.error input**:not([type='submit'])**, .control-group.error select, .control-group.error textarea {
border-color: #B94A48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

和

.control-group.error .checkbox, .control-group.error .radio, .control-group.error input**:not([type='submit'])**, .control-group.error select, .control-group.error textarea {
color: #B94A48;
}

但是我想知道如果元素是特定类型，我是否可以以某种方式使用 jquery 找到另一种方法来防止这种样式一直向下渗透......

否则我正在调查

  1. 找到一种方法来指示特定元素忽略特定的 css 类
  2. 在我添加错误类并在之后替换它之前，使用元素的所有 css 应用属性创建一个完全相同的副本
4

2 回答 2

1

我通常所做的是在我的全局样式表中添加一个类来覆盖字段上的错误类。您可以通过向 CSS 添加特异性来做到这一点。似乎是完全跨浏览器合规性的最简单（可能不正确）的方法。

于 2012-09-08T04:24:41.110 回答
1

您可以嵌套一个跨度并相应地设置它的样式。

<div class="control-group">
  <div class="controls">
    <span class="error">
      <input type="text" name="email" value="" id="email" class="input-large email" placeholder="email" required="">  
    </span>
    <input type="submit" value="submit" name="submit" id="submit" class="btn btn-success">
</div>

这会将您的错误限制在该范围内。

于 2012-09-08T04:27:38.177 回答