CODEWITHSUNDEEP
html
Dewagg
Dewagg

Reputation: 145

HTML focus second element when first is focused

Is it possible to focus that button in input-group when click on input? See this image: https://i.sstatic.net/GVqAx.png I want to border all this input, with button in the left. Thanks alot

P.S this code works only for input, but I want to focus .btn-search in same time.

input[type="text"]:focus{border:1px solid red}

My code:

<ul class="nav navbar-nav navbar-left">
            <form class="navbar-form navbar-left" role="search">
                <div class="input-group">
                    <input type="text" class="form-control search" placeholder="Search...">
                    <span class="input-group-btn">
                        <button class="btn btn-search" type="button"><i class="fa fa-search"></i></button>
                    </span>
                </div>
            </form>
        </ul>

Upvotes: 1

Views: 423

Answers (2)

loveNoHate
loveNoHate

Reputation: 1547

You can do with the + selector:

http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

input[type="text"]:focus{border:1px solid red}
input[type="text"]:focus + span .btn-search{border:1px solid red}

FIDDLE: http://jsfiddle.net/yrdr14cc/2/

Upvotes: 4

Guy Goldenberg
Guy Goldenberg

Reputation: 819

You can use jQuery to do this.
I can't really think of a way to do this without JavaScript.

$('input[type="text"]').focus(
    function(){
        $(this).css('border','1px solid red'); 
        $('.btn .btn-search').css('border','1px solid red');
    }
);

Upvotes: 0

Related Questions