Bootstrap: has-error does not change the color of buttons in an input-group

[adelinor]

Buttons in an input-group do not get their border colour changed when there is a parent element with has-error .

Example:

<div class="has-error" style="margin: 2em; width: 300px;">
<div class="input-group">
    <input type="text" class="form-control" value="zzz">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">Search</button>
    </span>
</div>
<p class="help-block">No results found for the provided criteria</p>
</div>

See the attached picture to see how it renders.

I would expect something more like the screen shot below.

[zlatanvasovic]

Just change .btn-default to .btn-danger.

[cvrebert]

I think we can't recolor the button text in the general case because it might be a colored button already, which would make it look bad.

[adelinor]

yes .btn-danger goes well in that context.

[mdo]

Yeah, we won't be able to do this per @cvrebert's comment.

[zlatanvasovic]

@adelinor :)

[adelinor]

@ZDroid :+1: many thanks. Do you know if, in theory, the change of a class in an element generates events?

[zlatanvasovic]

jQuery or pure JS? Are you talking about changing button state class if input has error?

[zlatanvasovic]

For you: http://jsfiddle.net/ZDroid/F7cUV/

[adelinor]

Yes, I would need to change the button state class so that it is consistent with the input group class.

Your example shows exactly that, thank you very much :)

[zlatanvasovic]

:)

2013/12/3 adelinor [email protected]

Yes, I would need to change the button state class so that it is
consistent with the input group class.

Your example shows exactly that, thank you very much :)

—
Reply to this email directly or view it on GitHubhttps://github.com/twbs/bootstrap/issues/11659#issuecomment-29751997
.

Zlatan Vasović - _ZDroid_

[adelinor]

And here is an example based on the one above with AngularJS: http://jsfiddle.net/adelinor/Pty3g/

[zlatanvasovic]

:)

2013/12/8 adelinor [email protected]

And here is an example based on the one above with AngularJS:
http://jsfiddle.net/adelinor/Pty3g/

—
Reply to this email directly or view it on GitHubhttps://github.com/twbs/bootstrap/issues/11659#issuecomment-30093365
.

Zlatan Vasović - _ZDroid_

[mdo]

Fixed in v3.1.1. We haven't outlined the button entirely, but we have fixed the border colors to behave more appropriately.

[msieurtoph]

Assuming .has-warning has this effect on .input-group-addon :

.has-warning .input-group-addon {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #8a6d3b;
}

Why not adding that kind of rule ?

.has-warning .input-group-btn .btn.btn-default {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #8a6d3b;
}

That way, the button is colored according to input validation state, but only if it has a default style (btn-default). That seems to be the expected behavior.
And if the button has a specific helper style (btn-danger, btn-warning ...), it is not overwritten.