[英]Radio buttons are checked simultaneously
我一直在嘗試復制此頁面https://vk.com/您可以看到他們已經更改了第二種形式的單選按鈕的標准外觀。
我成功更改了按鈕的設計,但現在同時檢查了它們。
HTML
<form class="form2">
<div class="heading">
<h2>Poprvé na VK?</h2>
<p>Okamžitá registrace</p>
</div>
<input type="text" placeholder="Vaše jméno" required>
<input type="text" placeholder="Vaše příjmení" required class="last-name">
<label class="birth">
<span>Datum narození
<i class="fa fa-question-circle-o"
aria-hidden="true"></i></span>
<input type="date" class="date" required>
</label>
<label>
<span class="gender-head">Pohlaví</span>
<div class="gender">
<input type="radio" id="1-option" name="selector" value="female" class="control">
<div class="button"></div>Žena
<input type="radio" id="2-option" name="selector" value="male" class="control">
<div class="button"></div>Muž
<input type="radio" id="3-option" value="other" name="selector" class="control">
<div class="button"></div>Jiné
</div>
</label>
<button type="submit">Zaregistrovat se</button>
<a href="#">
<i class="fa fa-facebook-square" aria-hidden="true"></i> Přihlásit se přes Facebook</a>
</form>
CSS
form {
width: 290px;
background-color: #fff;
padding: 20px 15px;
float: right;
border: 1px solid #E0E1E3;
font-size: 13px;
border-radius: 3px;
}
.form2 {
margin-right: 10px;
clear: right;
height: 380px;
display: flex;
flex-flow: row wrap;
color: #333436;
justify-content: center;
}
.form2 .heading {
flex-wrap: wrap;
margin: 0 auto;
}
.form2 h2 {
margin-top: 0px;
margin-bottom: 0px;
font-size: 20px;
font-weight: 100;
}
.form2 p {
font-size: 12px;
margin: 2px 0 0 9px;
}
.form2 input {
height: 30px;
border-radius: 3px;
border: 1px solid #DBDCDE;
width: 270px;
margin-top: -15px;
margin-bottom: 0;
}
.form2 .last-name {
margin-top: -15px;
}
.form2 span {
font-weight: 600;
margin-top: -50px;
color: #7A7B7D;
font-size: 13px;
}
.form2 .birth {
margin: -15px 0 0 10px;
}
.form2 .date {
margin-top: 10px;
margin-bottom: -100px;
}
.form2 .gender-head {
margin-left: -10px;
margin-bottom: 20px;
}
.gender {
display: flex;
width: 260px;
margin: 15px 0 0px -10px;
justify-content: space-between;
font-size: 13px;
color: #000;
}
.gender input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.gender .button {
border: 1px solid #A3A4A6;
background: #fff;
border-radius: 50%;
height: 12px;
width: 12px;
margin-top: 2px;
margin-right: -40px;
}
.gender .button:hover {
cursor: pointer;
background-color: #EAEBED;
}
.gender .button::before {
display: block;
content: '';
height: 6px;
width: 6px;
border-radius: 50%;
}
input[type="radio"]:checked ~ .button {
border: 1px solid #5A7CA3;
}
input[type="radio"]:checked ~ .button::before {
background: #5A7CA3;
margin: 3px 2px 2px 3px;
}
::-webkit-input-placeholder {
color: #7A7B7D;
padding-left: 12px;
}
.form2 button {
height: 20px;
}
http://jsfiddle.net/Skidle/u3zj66sd/
我還沒有學習JavaScript,所以我更喜歡CSS和HTML的解決方案。 謝謝!
如果查看單選按鈕,則通過移除position
,可以看到只選擇了一個,並且對每個選擇都是正確的:
問題出在演示文稿的工作方式上。 CSS代碼:
input[type="radio"]:checked ~ .button::before // Is wrong.
input[type="radio"]:checked + .button::before // Is right.
說明
為CSS提供的代碼~
選擇器是同級選擇器,它將選擇所有選擇器。
同時,您需要的是+
選擇器,即直接或相鄰的兄弟選擇器。 這僅選擇一個。
需要在此處進行更改:
input[type="radio"]:checked + .button::before {
background: #5A7CA3;
margin: 3px 2px 2px 3px;
}
小提琴: http : //jsfiddle.net/0rqu3s2c/
注意:嘗試單擊其他輸入時會出現問題。 因此,您可能需要檢查阻止它的原因。 請不要使用沒有理想結果的
absolute
定位。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.