CODEWITHSUNDEEP
cssformsinputtwitter-bootstrap-3
user2643870
user2643870

Reputation: 1065

how to make the entire form (input and submit button) change border color on focus (bootstrap 3)

I am using Bootstrap 3 and am trying to make it so that the entire form (input field AND button), change the border color on focus. Meaning, if I click in the input field, the entire border of the button should also change colors, not just the border of the input field. Does that make sense?

Here is the code:

<form class="form-inline" role="form">

<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>

</form>

and the CSS:

.form-control:focus {
    border-color:#1ABC9C;
    box-shadow:none;
}

The problem with that is ...it just changes colors of the input field, not the button, unless someone clicks the button. How do I make it change colors for both at the same time?

Fiddle: http://jsfiddle.net/CbGpP/

Upvotes: 3

Views: 7745

Answers (3)

Kevin Lynch
Kevin Lynch

Reputation: 24703

You could use ~ in css to hover over one element and select another. You could also remove the left and right border of either element so they look like one.

DEMO http://jsfiddle.net/kevinPHPkevin/CbGpP/4/

.form-control:focus ~ span .btn{
    border-color:#1ABC9C;
    box-shadow:none;
    border-left: #ccc;

}

Upvotes: 0

Skrivener
Skrivener

Reputation: 1023

You have to be a little hacky if you're not using JS, so this won't be flexible if you change your layout, use with caution.

.form-control:focus,
.form-control:focus + .input-group-btn > .btn {
    border-color:#1ABC9C;
    box-shadow:none;
    /* outline: 5px solid red; */
}

Upvotes: 0

Joe
Joe

Reputation: 15528

Use the adjacent sibling selector so your CSS looks like this:

.form-control:focus, .form-control:focus + span .btn{
    border-color:#1ABC9C;
    box-shadow:none;
}

It's supported in all major browsers including IE7+.

Here it is working: http://jsfiddle.net/CbGpP/2/

Upvotes: 4

Related Questions