Испытание. Помогите пожалуйста, никак не могу понять, что нужно вставить, вместо selector1 ,ну и остальными можете подсказать, если не трудно

 <body>
<header class="page-header">Форма личных данных</header>
<main>
  <form action="/echo" method="post">
    <fieldset>
      <legend>Примеры полей</legend>
      <div class="half-width">
        <label>Радио-переключатели</label>
        <input id="radio-1" name="radio" type="radio" checked>
        <label for="radio-1">Активный</label>
        <input id="radio-2" name="radio" type="radio">
        <label for="radio-2">Неактивный</label>
        <input id="radio-3" name="radio" type="radio" disabled>
        <label for="radio-3">Заблокированный</label>
      </div>
      <div class="half-width">
        <label>Чекбоксы</label>
        <input id="checkbox-1" type="checkbox" checked>
        <label for="checkbox-1">Активный</label>
        <input id="checkbox-2" type="checkbox">
        <label for="checkbox-2">Неактивный</label>
        <input id="checkbox-3" type="checkbox" disabled>
        <label for="checkbox-3">Заблокированный</label>
      </div>
      <label>Текстовые поля</label>
      <input type="text" value="Обычное">
      <input type="text" value="Обязательное" required>
      <input type="text" value="Заблокированное" disabled>
      <input type="text" value="Неверные данные" pattern="[0-9]{8}">
    </fieldset>
  </form>
</main>
<footer class="page-footer"></footer>
body {

width: 550px;
}

form {
margin: 0 auto;
padding: 20px;
width: 400px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 0 10px #cccccc;
}

fieldset {
padding: 10px;
border: 1px solid #34495e;
border-radius: 5px;
}

fieldset legend {
color: #34495e;
}

.half-width {
display: inline-block;
margin-right: -4px;
width: 50%;
}

label {
display: block;
margin-top: 10px;
margin-bottom: 5px;
}

.half-width input{
display: none;
}

selector1 {
color: #333333;
vertical-align: middle;
}

selector2 {
content: “”;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
vertical-align: middle;
border: 3px solid #ffffff;
box-shadow: 0 0 0 3px #a0a0a0;
}

selector {
border-radius: 50%;
}

selector {
background-color: #1abc9c;
box-shadow: 0 0 0 3px #1abc9c;
}

selector {
color: #1abc9c;
}

selector {
box-shadow: 0 0 0 3px #cecece;
}

selector {
color: #cecece;
}

selector {
width: 95%;
height: 24px;
margin-bottom: 10px;
padding: 2px 5px;
color: #000000;
border: 2px solid #bdc3c7;
border-radius: 5px;
vertical-align: middle;
}

selector {
border-color: #e74c3c;
}

selector {
color: #bdc3c7;
background-color: #f5f5f5;
border-color: #ecf0f1;
}

selector {
color: #c0392b;
background-color: #f2a097;
border-color: #e74c3c;
}

1 симпатия

А можете помочь понять что вообще происходит отдельно по каждому селектору?

  1. Убирает с глаз долой дефолтные элементы радиокнопку и чекбокс.
  2. ???
  3. Отрисовывает перед лейблом квадратик 7 на 7
  4. Скругляет углы квадратика из 3 пункта у радиокнопок, делая его кружочком.
  5. ???
  6. Зеленеет лейбл, если инпут перед ним checked
  7. Затеняет disabled элементы
  8. Затемняет лейбл disabled элементов
  9. Отрисовывает поведение текстовых полей
  10. Делает рамку обязательных полей
  11. Затеняет disabled поля
  12. Обводит рамкой и красит красным текстовое поле invalid (т.к. у нас там паттерн, а значение value этого поля не соответствует паттерну, то последнее поле становится invalid)

Помогите, никак не пойму что означают 2 и 5 пункт, вообще потерялся…(