CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Pedro Corchero Murga
Pedro Corchero Murga

Reputation: 113

Apply styles to button on input text with Bootstrap

I have a form maked with Bootstrap, i want to apply styles to button when the input text is focus (for example when focus background to green), how can i do?

Main structure:

  <div class="col-md-5"><div class="input-group">
        <input id="inputSearch cf" class="form-control" placeholder="Search..." type="text">
        <span class="input-group-btn">
          <button id="btnSearch" class="btn btn-primary" type="button">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </div>
    </div>
</div>

This is my JSFFidle: http://jsfiddle.net/3Q3Le/

Upvotes: 1

Views: 273

Answers (4)

Aditzu
Aditzu

Reputation: 706

If you want you can use jQuery.

$("[id='inputSearch cf']").click(function() {
        $("#btnSearch").css("backgroundColor","green");
 });

Of course before that you should load jQuery library

Here you can find a demo: http://jsfiddle.net/3Q3Le/4/

Upvotes: 0

Docter
Docter

Reputation: 43

Add this style in your site css file:

    .form-control:focus {
    border-color: #00cf00;
    box-shadow: 0 1px 1px rgba(0, 207, 0, 0.075) inset, 0 0 8px rgba(0, 207, 0, 0.6);
    outline: 0 none;
}

.form-control:focus + .input-group-btn .btn { background:green }

Click here for demo

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

Try this: http://jsfiddle.net/3Q3Le/1/

#inputSearch:focus {
    background-color: green;
    color: #fff;
}

#inputSearch:focus + .input-group-btn #btnSearch {
    background: red;
}

Upvotes: 1

SW4
SW4

Reputation: 71230

Demo Fiddle

Try adding the below to your CSS:

input[id="inputSearch cf"]:focus{
    background:green;
}

Upvotes: 1

Related Questions