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

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

我了解您希望在这些元素中应用样式。

你可以检查一下：

• https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
• https://css-tricks.com/almanac/selectors/f/focus-within/

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

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

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