Флажок не отображается

Question

Я пытаюсь установить флажок HTML 5 required в форму:

<p>
  <input class="checkbox" type="checkbox" required name="terms"> By submitting you agree to the processing of your data for the purpose of processing your request/booking.
  <br>
  <a href="/en/datenschutz.php" target="_blank">
    <u>Privacy  Policy</u>
  </a>
</p>

Не отображается ни в одном браузере.У меня не было этой проблемы с другими сайтами раньше, этот сайт работает с Bootstrap v2.2.2.

Я нашел возможное решение с ярлыками, которые не работали.

Answer 1

Вы можете использовать оба CSS. Но здесь style = "display: inline-block;" внутри типа ввода отображаются переопределения: нет;

input.checkbox {
    display: inline-block;
}

/*input[type="checkbox"] {
    display: inline-block;
}*/

<p>
  <input class="checkbox" type="checkbox" required name="terms">By submitting you agree to the processing of your data for the purpose of processing your request/booking.
</p>

<a href="/en/datenschutz.php" target="_blank">
  <u>Privacy  Policy</u>
</a>

Answer 2

Ваш файл Style.css имеет это правило:

input[type="checkbox"] {
    display: none;
}

Удалите его, и вы увидите свой флажок.

Если вам нужно это правило по какой-либо причине и вы хотите переопределить толькоэто для этого конкретного флажка, тогда вам придется добавить еще одно правило CSS, чтобы переопределить его.Очевидно, что добавление встроенного стиля будет работать, но это может быть не лучшим способом:

<input class="checkbox" type="checkbox" required name="terms" style="display: inline-block;">