将 ':focus' 样式应用于输入组

Question

我有一个正常的 fromBootstrap inputs以及“.input-group”。

当我单击法线时，input焦点看起来很好，因为它突出显示了整个字段

但对于input带有“.input-group”的它看起来不太好（无论如何对我来说）

我想要：

• % 字段具有border-top, border-bottom,border-right
• input不具备border-right

到目前为止我有以下删除css

if ($('input').is(':focus')) {
    $('.form-control:focus').css('border-right', '0');
    $('.input-group-append').addClass('inputGroupEndFocus');

到目前为止我有以下内容

为了得到这个，这是css

.inputGroupEndFocus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    border-radius: 4px;
    border-left: 0;
}

这是HTML

<div class="form-group row">
    <label for="creditLimitField" class="col-2 col-form-label">Percentage markup</label>
    <div class="col-2" style="padding: 0">
        <div class="input-group">
            <input id="markupPercentField" class="form-control" type="number" placeholder="Enter a markup percentage" value="20">
            <div class="input-group-append">
                <span class="input-group-text font-weight-bold">%</span>
            </div>
            <div id="markupPercentFieldError" class="invalid-feedback">
                Percentage cannot be <span id="percentError"></span>.
            </div>
        </div>
    </div>
</div>

我还有两个无法解决的问题：

1. 输入上仍然有右行（怀疑与 有关box-shadow）
2. 我只希望它适用于，input但focus目前它会将其添加到我的所有内容中input-groups，因为我没有在其中设置 ID、姓名等

Answer 1

Bootstrap 5 的纯 CSS 解决方案：

我从 bootstrap 类中获取整个 css 代码.form-control:focus，并将它们border-radius: .25rem;添加.form-control到类的自定义 css 代码中.input-group:focus-within。.form-control:focus我还通过使用box-shadow: none !important;on删除了默认阴影.input-group .form-control:focus。这避免了双重阴影。

.input-group:focus-within {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
    z-index: 3;
    border-radius: .25rem;
}
.input-group .form-control:focus {
    box-shadow: none !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">

  <p>Examples</p>
  
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>

  <div class="input-group mb-3">
    <input class="form-control" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-primary" type="submit">Search</button>
  </div>
  
</div>