<fieldset>
<input type="number" name="first-number" class="number first-number" placeholder="Min" oninput="onInputChange()">
<legend style="font-size: 13px;">First number</legend>
</fieldset>
-
1Коротко: никак. Не коротко: CSS не умеет изменять стили родительских классов при изменении дочерних. Вариант изменять так, как вы хотите, есть только с использованием JS.– Vladimir Gonchar3 июл 2020 в 8:14
2 ответа
В рамках текущей разметки поменять цвет не получится, потому что (как верно отметил в комментарии @VladimirGonchar) CSS не умеет изменять стили родительских классов при изменении дочерних - это каскад, который идёт только сверху вниз.
Но можно ведь поменять разметку - обернуть всё родительским дивом, инпут поставить перед филдсетом, а с помощью позиционирования визуально переместить его внутрь. Тогда всё будет работать:
fieldset {
height: 40px;
}
.wrapper {
position: relative;
}
.first-number {
position: absolute;
left: 15px;
bottom: 15px;
}
.first-number:focus ~ fieldset {
border-color: red;
}
<div class="wrapper">
<input type="number" name="first-number" class="number first-number" placeholder="Min" oninput="onInputChange()">
<fieldset>
<legend style="font-size: 13px;">First number</legend>
</fieldset>
</div>
Очень хочется докопаться до вашей разметки. Одному полю не нужна обертка из <fieldset>
и <legend>
- эти теги существуют для разметки групп полей, так говорится в MDN.
И хоть CSS не позволяет обратиться к родителю, есть одно исключение и оно как раз вам подходит - это связка <label>
+ <input>
+ селектор :focus-within
.
Не обращайте внимания, что итоговый вид в приведенном мной коде не полностью соответствует тому, что у вас, а именно нет надписи поверх рамки. Это можно решить небольшим количеством дополнительных стилей, а вот семантика и удобство пользования формой будут точно лучше при предложенном мной подходе.
label {
border: 1px solid;
padding: 1em;
display: inline-block;
}
label:focus-within {
border-color: red;
}
<label for=x>
Some label
<br>
<input id=x type=text>
</label>