2012-09-08 59 views
0

我正在使用Twitter Bootstrap創建如下所示的表單元素。 通常情況下,「提交」應置於「控制」容器外,但對我的佈局,我需要它裏面像這樣:使用jquery修改全局css聲明

<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包括:不使用(類型=「提交」])

.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一個確切的重複應用的元素的 屬性之前我添加錯誤類別和 替代之後
+0

我可以質疑爲什麼提交需要在'控件'div嗎?你確定這是唯一的方法嗎? –

回答

1

我通常所做的是在我的全局樣式表中添加一個類來覆蓋該字段上的錯誤類。你可以通過爲你的CSS增加特殊性來實現。似乎是完成跨瀏覽器合規性的最簡單(也許不是正確)的方式。

+0

是的,這就是我現在正在做的事情,但是我想讓它成爲更廣泛的受衆的通用類型,如果引導程序庫更改了某些東西可能會破壞 – user391986

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> 

這會限制你的錯誤只跨度。

+0

,那麼這將是一個很大的折衷,不幸的是引導程序被寫入它的方式定義爲.control-group.error – user391986