Добавьте звездочку после метки, когда вход имеет атрибут 'required'

Question

<div class="form-group">
     <label for="Description">"Description"</label>
     <input type="text" id="Description" class="form-control"
      [(ngModel)]="description" name="Description"
       required />
 </div>

В любом случае можно добавить звезду (*) после метки (label :: after) без изменения чего-либо в код, просто добавив CSS селектор? AFAIK нет поддержки предыдущего css селектора (имеет), поэтому я не могу использовать что-то вроде:

label:has(+ input:required)::after {
  content:" *";
}

Answer 1

Нет.

Через CSS - только невозможно достичь результата без изменения разметки или javascript в коде , если только

1) метка и ввод находятся в одной строке, рядом и
2) фон имеет solid цвет

, как в примере ниже, поэтому вы можете обмануть по всегда добавляя звезду, но если родной брат input не [required], тогда накрыть звезду, используя box-shadow.

input { border: 1px #ccc solid }

label::after {
   content: "*";
   width: 1.5em;
   margin-right: 1.5em;
}

label + input:not([required]) {
   box-shadow: -3.2em 0 0  #fff;
}

<label>Username</label>
<input name='username' required />

<br /><br />

<label>Username</label>
<input name='username' />

Но я бы посоветовал хотя бы изменить порядок элементов в разметке (и показать их в правильном порядке с display:flex и flex-direction: row-reverse)

Answer 2

Правильный селектор будет

.form-group:has(:required) label

Но, увы, поскольку псевдо-класс :has равен CSS Селекторы уровня 4 и не имеют поддержка браузера вообще.

Вы можете использовать его с jQuery, хотя:

jQuery($ => {
  $('.form-group:has(:required) label').each((i,el) => {console.log(el); el.classList.add('required')})
})

label.required:after {
  content: ' *';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="Description"><span>Description</span></label>
  <input type="text" id="Description" class="form-control"
         name="Description"
         required />
</div>

Поскольку вы, кажется, используете angular, это может быть немного сложно. Я не знаю, есть ли что-то подобное в Angular.

Answer 3

Если у вас все в порядке с добавлением div вокруг каждой метки и группы ввода, вам может помочь следующий подход.

input {
  border: 1px #ccc solid
}

input[required]+label::after {
  content: "*";
  color: red;
  width: 1.5em;
  margin-right: 1.5em;
}

.form-group {
   display: flex;
}
.form-group label {
order: -1;
width: 100px;
}

<div class="form-group">
  <input name='username' required />
  <label>Username</label>
</div>

<br /><br />
<div class="form-group">

  <input name='username' />
  <label>Username</label>

</div>