Question

单击输入时是否可以将该按钮聚焦在输入组中？看到这张图片：http://tech.oyster.com/save-ram-with-python-slots/ 我想边框所有这些输入，左边是按钮。非常感谢

P.S此代码仅适用于输入，但我想同时关注.btn-search。

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

我的代码：

<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>

Answer 1

您可以使用+选择器：

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/

Answer 2

您可以使用jQuery来执行此操作如果没有JavaScript，我真的无法想到一种方法。

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

HTML聚焦第二个元素时，首先聚焦

2 个答案: