Question

I want to use the “input with error” styling
as appear here:
http://twitter.github.com/bootstrap/

and after it a custom css only

(relevant row is 722

form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
  color: #b94a48;
}

)

My markup:

<div id="new_folder_name_div" class="clearfix error">
                    <label for="new_folder_name">Name&nbsp</label>
                    <div class="input">
                        <input class="medium error" id="folder_name" size="15" type="text" />
                        <span>*</span>
                    </div>

An image:

but I see with Chrome console the input element isn’t matched with the above css role.

Any idea why ?

Answer 1

The actual input is the next line down. Note that the containing div with classes “clearfix error” is required.

form .clearfix.error input, form .clearfix.error textarea {
    color: #B94A48;
    border-color: #EE5F5B;
}

<div class="clearfix error">
    <div class="input">
      <input class="xlarge error" type="text">
    </div>
</div>