我正在嘗試為性別執行自定義收音機輸入，用戶只能在“女性”和“男性”之間進行選擇，但我意識到當我點擊它時我看不到選中的收音機似乎不起作用（以被選中）當我點擊它時，我試圖找出導致無線電未被檢查的原因，但我找不到它。它曾經用于復選框輸入，任何人都可以幫助我，我可能遺漏了一些東西。
.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);
}<div class="profile__input">
<div class="input__title tx-gray">Genre</div>
<div class="input__radio">
<div class="blu-radio">
<div class="blu-radio-container">
<input type="radio" id="blu-radio-3as6fzz1" name='gender'>
</div>
<label for="blu-radio-3as6fzz1" class="blu-radio-label">Homme</label>
</div>
</div>
<div class="input__radio">
<div class="blu-radio">
<div class="blu-radio-container">
<input type="radio" id="blu-radio-v0okyps4r" name='gender'>
</div>
<label for="blu-radio-v0okyps4r" class="blu-radio-label">Femme</label>
</div>
</div>
</div>uj5u.com熱心網友回復：
試試這個代碼，我使用 input:checked 來測驗收音機是否被選中，然后我將背景顏色附加到假收音機。
我將假無線電容器放入標簽中，因此當您單擊它時，它會檢查隱藏的真實單選按鈕。
.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);
}<div class="profile__input">
<div class="input__title tx-gray">Genre</div>
<div class="input__radio">
<div class="blu-radio">
<input type="radio" id="blu-radio-3as6fzz1" name='gender'>
<label for="blu-radio-3as6fzz1" class="blu-radio-label">
<span class="blu-radio-container"></span> Homme
</label>
</div>
</div>
<div class="input__radio">
<div class="blu-radio">
<input type="radio" id="blu-radio-v0okyps4r" name='gender'>
<label for="blu-radio-v0okyps4r" class="blu-radio-label">
<span class="blu-radio-container"></span> Femme
</label>
</div>
</div>
</div>uj5u.com熱心網友回復：
一個基本的...
* {
font-size : 20px;
}
label > input[type="radio"] { display : none; }
label > 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 > input[type="radio"]:checked span {
color : black;
}
label > 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 > 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;
}<label>
<input type="radio" name="gender">
<span>Homme</span>
</label>
<label>
<input type="radio" name="gender">
<span>Femme</span>
</label>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375079.html