Добавлять контент в label посредством CSS

У меня есть следующий input:

<div class="form-group col-md-4">
   <label for="first_name">First name</label>
   <input type="text" id="first_name" name="first_name" class="form-control" placeholder="first name" required />
</div>

Мне нравился бы, из-за CSS, добавлять один * в label этого и всех input что были required

Из-за готового, немного похожего на это:

input:required ~ label::before{
  content: "*";
}

И уже, если он красный, он был бы гениальным:

input:required ~ label::before{
  content: "<i>*<i>";
}
input:required ~ label > i {
  color:red
}

Но что конечно, это не функционирует.

1
задан 24.08.2018, 01:05
3 ответа

Это mГЎs близкий, что podrГ-схвати, делать, не изменяя HTML, и из-за CSS он немного asГ-:

input[required] {
  background-image: radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat;
}
<div class="form-group col-md-4">
   <label for="first_name">First name</label>
   <input type="text" id="first_name" name="first_name" class="form-control" placeholder="first name" required />
</div>
1
ответ дан 20.11.2019, 05:58
  • 1
    но это не pondrí в в label, просвете – Dibort 24.08.2018, 02:07
  • 2
    И было бы возможно делания одного ::after? так как я хочу сделать это tambia в selects, радио, checkboxes.... немного характерно – Txmx 24.08.2018, 02:19
  • 3
    псевдо-элементы:: before/:: after только могут быть использованными в контейнерах и есть какие-то элементы, в которых не возможно помещать, как неудар в лунку, select... – Dibort 24.08.2018, 02:29

AquГ - ты имеешь, для всех этикеток, которые содержат класс required.

$(document).ready(function(){
  $("input[required='required']").closest('div').find('label').addClass('required')
})
.required:after {
  content: "*";
  color: red;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Título de la web</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="form-group col-md-4">
    <label for="first_name">First name</label>
    <input type="text" id="first_name" name="first_name" class="form-control" placeholder="first name" required="required" />
  </div>
</body>

</html>
1
ответ дан 20.11.2019, 05:58
  • 1
    Проблема этого состоит в том, что я должен помещать class="required" labels, и правда не интересовала меня. Так как это 8 страниц с 10 inputs. Только думания, что я должен искать их, утомляет меня – Txmx 24.08.2018, 02:02
  • 2
    Ahí это у тебя есть, посредством jquery, и признак required это у тебя есть, что añ adir правильно required =" required". И поскольку я вижу, что он утомляет тебя много, с которым ты заставил один искать, и remplazar required-> required =" required" и уже эта. – jld 24.08.2018, 02:13

Поскольку они прокомментировали тебе, не существуют "восходящие" селекторы в css, но (если ты не можешь aГ±adir классы в label из-за какой-то razГіn) ты можешь использовать прием вкладывая порядок required и label в html и исправляя это с css и flex (ты мог бы делать это даже с float без flex).

input:required ~ label::before{
  content: "* ";
  color:red;
}
.form-group{
  display:flex;
}
label{
order:-1;
margin:0 10px;
}
<div class="form-group col-md-4">
   <input type="text" id="first_name" name="first_name" class="form-control" placeholder="first name" required />
   <label for="first_name">First name</label>
</div>
0
ответ дан 20.11.2019, 05:58
  • 1
    Тема, - в котором я должен искать все required и менять их, искренне только думать это дает мне patatú s, из-за которого их достаточно на многих страницах. Тогда его состояло в том, чтобы создавать с CSS, так как они имеют тот же файл, и он был бы fá cil – Txmx 24.08.2018, 02:18
  • 2
    Тогда я боюсь, что, если ты хочешь сделать это diná micamente без ручной одинокой работы podrá s делать это с js, что añ ada класс в каждый label, что esté перед required. Или прикреплять работу обнаруживания всех required и делания чего-либо подобного: label[for=email]:before, label[for=first_name]:before, label[for=direction]:before { – Montaycabe 24.08.2018, 02:39