Как активировать: фокус на кнопку ввода +, когда пользователь нажимает на вход? - PullRequest
Новая
       24

Как активировать: фокус на кнопку ввода +, когда пользователь нажимает на вход?

0 голосов
/ 12 сентября 2018 
<div class="col-sm-12 col-md-12 col-lg-3 my-1">

            <form action="?p=pesquisa" method="post" value="" enctype="multipart/form-data">

                <div class="input-group">

                    <input class="form-control searchInput" id="cxnome" name="cxnome" type="text" placeholder="Pesquisar" aria-label="Search" style="border-right: none;" required="required">

                    <button type="submit" name="pesquisar" class="input-group-append searchInput">

                        <div class="input-group-text searchInput"><i class="fas fa-search"></i></div>

                    </button>            

                </div>

            </form>

        </div>

CSS: 

button[type="submit"]:focus{box-shadow: 0 0 0 0.2rem rgba(255,255,255, 0.3);}
input[type="text"]:focus{box-shadow: 0 0 0 0.2rem rgba(255,255,255, 0.3);}

Я использую этот CSS, но я хочу, чтобы кнопка ввода + получала: focus, независимо от того, нажимает ли пользователь на вход или на кнопку.

Вот что я хочу:

enter image description here

1 Ответ

0 голосов
/ 12 сентября 2018

Я понимаю, что вы хотите применять стили к этим элементам, когда один сфокусирован.

Вы можете проверить это:

Но поддержка не велика.Таким образом, вы должны использовать что-то подобное в javascript (этот пример с использованием jquery) 

$("#wrapper .input, #wrapper .button")
  .focus(function() {
    $("#wrapper").addClass("focus");
  })
  .blur(function() {
    $("#wrapper").removeClass("focus");
  });

Я создал и пример здесь: https://codepen.io/luarmr/pen/QVmJqB

...