如何申请：关注多个相同的选择器？

Question

我正在尝试更改输入类型数字获得焦点时的底部边框颜色。我部分成功了，但 css 并未应用于所有选择器。问题是：

左侧（peso）没有焦点，但它有与 Kg 相同的选择器。这是代码：https://jsfiddle.net/snake93/nLdrcv71/1/

input[type=number] {
    color: #666;
    border-width: 0px 0px 1px 0px !important;
    border-color: #dcdcdc !important;
    border-radius: 0px !important;
    background: #fafafa00;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff00 !important;
    border: 1px solid #dcdcdc !important;
    border-radius: .25rem;
    border-width: 0px 0px 1px 0px !important;
    border-radius: 0px !important;
}

.form-control:focus,
.form-control:focus + span {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

.input-group-text:focus {
    background:red !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" ></script>

<div class="input-group mb-3">
  <span class="input-group-text">Peso</span>
  <input type="number" class="form-control">
  <span class="input-group-text">Kg</span>
</div>

Answer 1

替换 HTML 元素的顺序，使“Peso”在 <input type="number"> 之后，切换到使用 ~ CSS general sibling combinator to select all adjacent siblings, and use CSS order 来更改来自 CSS.

input[type=number] {
    color: #666;
    border-width: 0px 0px 1px 0px !important;
    border-color: #dcdcdc !important;
    border-radius: 0px !important;
    background: #fafafa00;
}

.first-input {
    order: 1;
}

.second-input {
    order: 2;
}

.third-input {
    order: 3;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff00 !important;
    border: 1px solid #dcdcdc !important;
    border-radius: .25rem;
    border-width: 0px 0px 1px 0px !important;
    border-radius: 0px !important;
}

.form-control:focus,
.form-control:focus ~ span {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

.input-group-text:focus {
    background:red !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" ></script>

<div class="input-group mb-3">
  <input type="number" class="second-input form-control">
  <span class="first-input input-group-text">Peso</span>
  <span class="third-input input-group-text">Kg</span>
</div>

The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

来源：MDN

The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.

来源：MDN

我的解决方案的灵感来自 Paco Coursey 的博客 post CSS Previous Sibling Selector.

Answer 2

选择器 .form-control:focus + span 仅影响带有 .form-control class 的元素之后的跨度。取而代之的是，您可以使用 .input-group:focus-within span，当具有 .input-group class 的元素被聚焦时，它会将您的样式应用于子跨度。

.form-control:focus,
.input-group:focus-within span {
    color: #00a1ff;
    background-color: #fff0;
    ...

编辑：我添加了完整标记以证明此解决方案确实有效。

input[type=number] {
    color: #666;
    border-width: 0px 0px 1px 0px !important;
    border-color: #dcdcdc !important;
    border-radius: 0px !important;
    background: #fafafa00;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff00 !important;
    border: 1px solid #dcdcdc !important;
    border-radius: .25rem;
    border-width: 0px 0px 1px 0px !important;
    border-radius: 0px !important;
}

.form-control:focus,
.input-group:focus-within span {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

.input-group-text:focus {
    background:red !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" ></script>

<div class="input-group mb-3">
  <span class="input-group-text">Peso</span>
  <input type="number" class="form-control">
  <span class="input-group-text">Kg</span>
</div>

Answer 3

只要输入聚焦或模糊，只需在其上切换 .focused class。

您的 css 应该看起来像这样（只是在另一个“+ span”之后添加了一个 .focused）：

.form-control:focus, .form-control:focus + span, .focused {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

并且您必须添加此 JavaScript 代码：

let input = document.getElementsByClassName("form-control")[0];
let firstSpan = document.getElementsByClassName("input-group-text")[0];

input.addEventListener("focus", addClass);
input.addEventListener("blur", removeClass);

function addClass() {
    firstSpan.classList.add("focused");
}

function removeClass() {
    firstSpan.classList.remove("focused");
}

这是工作 fiddle： https://jsfiddle.net/y1h8abnw/39/

如何申请：关注多个相同的选择器？

How to apply :focus on multiple identical selectors?

html

css

focus

input

bootstrap-4