Question

I am using Twitter Bootstrap to create form elements like below.
Normally the ‘submit’ should be placed outside of ‘controls’ container but for my layout I need it inside like so:

<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>

Everything works fine except for one thing, when I add the ‘error’ class to

<div class="control-group error">

the ‘submit’ button also get’s styled which I don’t want to. I can prevent this styling by behavior if I modify the bootstrap CSS to include :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);
}

AND

.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;
}

However I am wondering if I can somehow find another way with jquery prevent this style to trickle down all the way down if the element is of a specific type …

Otherwise I’m looking into

1. find a way to instruct a specific element to ignore a specific
   css class
2. create an exact duplicate with all css applied
   attributes of the element before I add the error class and
   substitute it after

Answer 1

What I’ve typically done is add a class in my global stylesheet to override the error class on the field. You do this by adding specificity to you CSS. Seems to be the easiest (maybe not right) way for complete cross browser compliance.