Как я могу установить флажок, даже если для его отображаемого значения установлено значение none?
Итак, я посмотрел учебник и обнаружил, что для создания настраиваемых флажков вы делаете в основном: вы помещаете поле div после фактического элемента ввода, отключаете отображаемое значение (устанавливаете его равным none) для фактического элемента ввода, затем вы стилизуете поле div вместо фактического элемента ввода с помощью некоторых псевдоклассов и псевдоэлементов. хотя это полностью работает, я не могу понять как именно это работает, у меня есть такие вопросы, как:
- Поскольку мы установили отображаемое значение фактического ввода флажка на «нет», то как мы все еще можем его проверить?
- Когда я меняю элемент с меткой класса "флажок" (вроде контейнера) на div, все полностью ломается, почему это происходит?
- Я сделал небольшую анимацию, чтобы увеличить поддельный флажок, а затем снова вернуться к исходному размеру, когда он проверен. Я хочу сделать то же самое с меткой, которая является родителем как для настоящих, так и для поддельных флажков, но насколько я знаю, что нет способа выбрать родительские элементы в CSS, как я могу это исправить?
Вот ссылка на учебник, если вам это нужно.
Вот мои коды CSS и HTML:
.checkbox{
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px;
cursor: pointer;
}
.checkbox_Input{
display: none;
}
.checkbox_Box{
width: 1.25em;
height: 1.25em;
border: 2px solid rgb(189, 189, 189);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
}
.checkbox_Box::after{
content: "\2714";
color: #ffffff;
font-size: small;
transform: scale(0);
transition: transform 0.4s;
}
.checkbox_Input:checked + .checkbox_Box{
background: #2266dc;
border-color: #2266dc;
animation: AnimateChecked 0.5s ease-in;
}
.checkbox_Input:checked + .checkbox_Box::after{
transform: scale(1);
}
@keyframes AnimateChecked{
50% {
width: 1.5em;
height: 1.5em;
}
100%{
width: 1.25em;
height: 1.25em;
}
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "checkbox.css">
<title>CheckBox</title>
</head>
<body>
<label class = "checkbox" for = "MyCheckBox">
<input class = "checkbox_Input" type = "checkbox" id = "MyCheckBox">
<div class = "checkbox_Box"></div>
Yes, Check The Checkbox
</label>
</body>
</html>@CBroe спасибо за все ответы! позвольте мне объяснить, что я имел в виду в вопросе: в HTML-коде у меня есть такая часть, как " <label class = "checkbox" for = "MyCheckBox">...</label>" this. Итак, насколько я понимаю, «метка» здесь — это текст, который направляет нас к флажку при нажатии, а также контейнер, содержащий наши настоящие и фальшивые флажки, но если я хочу изменить этот код на: «<div class = "checkbox" for = "MyCheckBox">...</div>" Я больше не могу поставить фальшивый флажок. Если я покажу фактический флажок и проверю его, он отлично работает +++
+++ Но я не хочу, чтобы он отображался, поэтому я могу настроить поддельный и использовать его. (Я пытался сделать значение видимости «скрытым», это не работает)
Как уже сказано в существующем ответе, вы необходимость метку, чтобы переключить статус флажка (что вы больше не можете сделать, щелкнув сам флажок, потому что он скрыт). Итак, затем измените порядок - поместите метку вокруг текст «Да, установите флажок» и используйте div в качестве элемента-контейнера. А если вы хотите применить какой-то эффект ко всей "группе" чекбокса не настоящие и текста - тогда ставьте чекбокс настоящий перед элементом-контейнером.
Ответы 1
Я думаю, чтение об элементе label поможет вам лучше понять этот элемент: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
- Элемент
labelпривязан к флажку через атрибутfor. Когда вы нажимаете на ярлык, он активирует флажок, несмотря на то, что он скрыт. - Опять же, элемент
labelпрограммно связан с элементами формы (флажок в вашем случае). Если вы измените его на div, он потеряет способность привязываться к элементу формы. - Что касается вашего последнего вопроса, я бы просто добавил анимацию к родительскому элементу (
label) или обернул текст встроенным элементом (например,span) и также добавил бы к нему анимацию.