modify global css declaration with jquery

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

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

May I question why the submit needs to be in the 'controls' div? Are you certain that's the only way? — Michael D Johnson
– Michael D Johnson, Commented Sep 8, 2012 at 5:10

tgormtx · Accepted Answer · 2012-09-08 04:24:41Z

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.

answered Sep 8, 2012 at 4:24

tgormtx

3221 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user391986 Over a year ago

yes that's what I'm doing right now but I wanted to make it generic for the wider audience and it's kind of a hack if the bootstrap library changes things could break

Michael D Johnson · Accepted Answer · 2012-09-08 04:27:38Z

1

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.

answered Sep 8, 2012 at 4:27

Michael D Johnson

9311 gold badge11 silver badges21 bronze badges

1 Comment

user391986 Over a year ago

that would have been a great compromise unfortunately the way bootstrap is written it's defined as .control-group.error

Collectives™ on Stack Overflow

modify global css declaration with jquery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related