Форма TYPO3 - стиль бутстрапа флажков
Есть ли готовый к использованию фрагмент css для стилизации флажков, созданных с помощью формы расширения TYPO3 (https://docs.typo3.org/typo3cms/extensions/form/8.7/)? HTML-код элемента флажка формы выглядит так:
html:
<div class = "form-group">
<div class = "input checkbox">
<div class = "form-check">
<label class = "add-on form-check-label" for = "basicContactForm-checkbox-1">
<input name = "tx_form_formframework[BasicContactForm][checkbox-1]" value = "" type = "hidden">
<input required = "required" class = "add-on" id = "basicContactForm-checkbox-1" name = "tx_form_formframework[BasicContactForm][checkbox-1]" value = "1" type = "checkbox">
<span>Yes, I confirm!<span class = "required">*</span></span>
</label>
</div>
</div>
</div>
И я хотел бы стилизовать его так, как например, Флажок Awesome Bootstrap:
Как лучше всего этого добиться?
Ответы 2
Просто добавьте CSS в голову и следуйте документации на github https://github.com/flatlogic/awesome-bootstrap-checkbox
что-то вроде этого будет работать
добавил диапазон в ваш html - см. примечание ниже остальное - просто css - надеюсь, это поможет вам
если вы не можете добавить какой-либо html, и он должен быть прямым css, тогда этот рабочий пример будет работать (лучшее, что я могу сделать на лету). расширение этого CSS должно помочь
.form-check {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.form-check input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border: 1px solid #e3e4e5;
}
.form-check input:checked ~ .checkmark {
background-color: purple;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.form-check input:checked ~ .checkmark:after {
display: block;
}
.form-check .checkmark:after {
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg
}<div class = "form-group">
<div class = "input checkbox">
<div class = "form-check">
<label class = "add-on form-check-label" for = "basicContactForm-checkbox-1">
<input name = "tx_form_formframework[BasicContactForm][checkbox-1]" value = "" type = "hidden">
<input required = "required" class = "add-on" id = "basicContactForm-checkbox-1" name = "tx_form_formframework[BasicContactForm][checkbox-1]" value = "1" type = "checkbox">
<span class = "checkmark"></span><!-- added for checkbox -->
<span>Yes, I confirm!<span class = "required">*</span></span>
</label>
</div>
</div>
</div>Не уверен, что смогу добавить <span class = "checkmark"> ... сначала нужно разобраться. Есть ли другой обходной путь?
почему вы просто не следуете документации репозитория github.com/flatlogic/awesome-bootstrap-checkbox, как описано ниже?
см. мой обновленный ответ - я добавил jsfiddle, который может вам помочь
Вы пытались переопределить частичный флажок Checkbox? См. Документы docs.typo3.org/typo3cms/extensions/form/FAQ/…. Партиал находится здесь:. \ Typo3 \ sysext \ form \ Resources \ Private \ Frontend \ Partials \ Chec kbox.html
... не работает jsfiddle.net/hfLhv8hq .... Я не могу изменить структуру html ... она автоматически сгенерирована