#html #css
#HTML #CSS
Вопрос:
Я пытаюсь выполнить пользовательский ввод радио для пола, пользователь может выбирать только между «женщиной» и «мужчиной», но я понял, что не вижу, чтобы проверенное радио отображалось, когда я нажимаю на него, кажется, не работает (должно быть выбрано), когда я нажимаю на него, я попытался выяснить, что заставляет радио не проверяться, но я не могу это выяснить. Раньше он работал с входами флажков.Кто-нибудь может мне помочь, пожалуйста, я, вероятно, что-то упускаю.
.profile__input .input__radio { display: inline-block; } .blu-radio { width: auto; margin: 16px 16px 16px 0; display: inline-flex; position: relative; } .blu-radio:not(.b-disabled) { cursor: pointer; } .blu-radio .blu-radio-container { width: 20px; min-width: 20px; height: 20px; position: relative; border: 2px solid transparent; border-radius: 50%; transition: .4s cubic-bezier(0.25, 0.8, 0.25, 1); border-color: #e0e0e0; } .blu-radio .blu-radio-container:before, .blu-radio .blu-radio-container:after { position: absolute; transition: .4s cubic-bezier(0.55, 0, 0.55, 0.2); content: " "; } .blu-radio .blu-radio-container:before { width: 48px; height: 48px; top: 50%; left: 50%; z-index: 11; border-radius: 50%; transform: translate(-50%, -50%); } .blu-radio .blu-radio-container input { position: absolute; left: -999em; } .blu-radio .blu-radio-container:after { position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; border-radius: 50%; opacity: 0; transform: scale3D(0.38, 0.38, 1); content: " "; } .blu-radio .blu-radio-label { padding-left: 8px; position: relative; line-height: 20px; } .blu-radio:not(.b-disabled) .blu-radio-label { cursor: pointer; color: rgba(0, 0, 0, 0.6); } lt;div class="profile__input"gt; lt;div class="input__title tx-gray"gt;Genrelt;/divgt; lt;div class="input__radio"gt; lt;div class="blu-radio"gt; lt;div class="blu-radio-container"gt; lt;input type="radio" id="blu-radio-3as6fzz1" name='gender'gt; lt;/divgt; lt;label for="blu-radio-3as6fzz1" class="blu-radio-label"gt;Hommelt;/labelgt; lt;/divgt; lt;/divgt; lt;div class="input__radio"gt; lt;div class="blu-radio"gt; lt;div class="blu-radio-container"gt; lt;input type="radio" id="blu-radio-v0okyps4r" name='gender'gt; lt;/divgt; lt;label for="blu-radio-v0okyps4r" class="blu-radio-label"gt;Femmelt;/labelgt; lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. В вашем коде нет ничего, проверяющего ввод:проверено
Ответ №1:
Попробуйте вместо этого этот код, я использую ввод:проверено, чтобы проверить, проверено радио или нет, затем я добавляю к поддельному радио цвет фона.
Я поместил поддельный радиоконтейнер в этикетку, поэтому, когда вы нажмете на него, он проверит настоящую радиокнопку, которая скрыта.
.profile__input .input__radio { display: inline-block; } .blu-radio { width: auto; margin: 16px 16px 16px 0; display: inline-flex; position: relative; } .blu-radio:not(.b-disabled) { cursor: pointer; } .blu-radio .blu-radio-container { width: 20px; min-width: 20px; height: 20px; position: relative; border: 2px solid transparent; border-radius: 50%; transition: .4s cubic-bezier(0.25, 0.8, 0.25, 1); border-color: #e0e0e0; display: inline-block; position: relative; top: 6px; } .blu-radio .blu-radio-container:before, .blu-radio .blu-radio-container:after { position: absolute; transition: .4s cubic-bezier(0.55, 0, 0.55, 0.2); content: " "; } .blu-radio .blu-radio-container:before { width: 48px; height: 48px; top: 50%; left: 50%; z-index: 11; border-radius: 50%; transform: translate(-50%, -50%); } .blu-radio input { display: none; } .blu-radio .blu-radio-container:after { position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; border-radius: 50%; opacity: 0; transform: scale3D(0.38, 0.38, 1); content: " "; } .blu-radio .blu-radio-label { padding-left: 8px; position: relative; line-height: 20px; } .blu-radio input:checked .blu-radio-label .blu-radio-container { background: red; } .blu-radio:not(.b-disabled) .blu-radio-label { cursor: pointer; color: rgba(0, 0, 0, 0.6); } lt;div class="profile__input"gt; lt;div class="input__title tx-gray"gt;Genrelt;/divgt; lt;div class="input__radio"gt; lt;div class="blu-radio"gt; lt;input type="radio" id="blu-radio-3as6fzz1" name='gender'gt; lt;label for="blu-radio-3as6fzz1" class="blu-radio-label"gt; lt;span class="blu-radio-container"gt;lt;/spangt; Homme lt;/labelgt; lt;/divgt; lt;/divgt; lt;div class="input__radio"gt; lt;div class="blu-radio"gt; lt;input type="radio" id="blu-radio-v0okyps4r" name='gender'gt; lt;label for="blu-radio-v0okyps4r" class="blu-radio-label"gt; lt;span class="blu-radio-container"gt;lt;/spangt; Femme lt;/labelgt; lt;/divgt; lt;/divgt; lt;/divgt; Ответ №2:
один из основных…
* { font-size : 20px; } label gt; input[type="radio"] { display : none; } label gt; input[type="radio"] span { --diameter : 1.4em; display : inline-block; height : var(--diameter); line-height : var(--diameter); cursor : pointer; width : 6.2em; position : relative; box-sizing : border-box; padding-left : calc(var(--diameter) .3em); color : #7d7d7d; } label gt; input[type="radio"]:checked span { color : black; } label gt; input[type="radio"] span:before { box-sizing : border-box; width : var(--diameter); height : var(--diameter); border : 1px solid #7d7d7d; border-radius : 50%; position : absolute; top : 0; left : 0; content : ' '; } label gt; input[type="radio"]:checked span::after { box-sizing : border-box; position : absolute; top : .1em; left : .1em; content : ' '; width : calc(var(--diameter) - .2em); height : calc(var(--diameter) - .2em); border-radius : 50%; background-color : #eb1641; } lt;labelgt; lt;input type="radio" name="gender"gt; lt;spangt;Hommelt;/spangt; lt;/labelgt; lt;labelgt; lt;input type="radio" name="gender"gt; lt;spangt;Femmelt;/spangt; lt;/labelgt;