javascript - 如何激活:focus on the input+button when a user click into the input?

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，但我希望 input+button 获得 :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