如何激活：当用户点击输入时关注输入+按钮？

Question

<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 不管用户是点击输入还是按钮。

这就是我想要的：

Answer 1

我了解到您想在获得焦点时在这些元素中应用样式。

你可以检查这个：

但是支持不是很好。所以你必须在 javascript 中使用类似的东西（这个例子使用 jquery）

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

我在这里创建和示例：https://codepen.io/luarmr/pen/QVmJqB

如何激活：当用户点击输入时关注输入+按钮？

How to activate :focus on the input+button when a user click into the input?

javascript

css

focus

input

button