当用户单击输入时，如何激活：专注于输入+按钮？

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