CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
user391986
user391986

Reputation: 30886

modify global css declaration with jquery

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

Upvotes: 0

Views: 571

Answers (2)

Michael D Johnson
Michael D Johnson

Reputation: 929

You could nest a span and style it accordingly.

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

This would restrict your error to only that span.

Upvotes: 1

tgormtx
tgormtx

Reputation: 322

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.

Upvotes: 1

Related Questions