0
我想知道，为什么当我可以选择两个图像，而不是只有一个。 （是一个图像，而不是单选按钮）。例如，如果您尝试选择2张图像，则会显示选中的图像，但我希望只能选择其中的一张。修复html和css代码
看那jsFiddle或看看下面的代码片段：
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
z-index: 10;
padding-top: 60px;
color: #999;
width: 100%;
min-height: calc(100vh - 60px);
}
.wrap{position:relative}
.wrap{width:100%;margin:0 auto;max-width:1024px;padding:0 16px}
.write {
position: relative;
max-width: 690px;
padding: 40px 16px 70px;
}
.write-gender{
text-align: center;
}
.write-gender {
display: inline-block;
width: 128px;
height: 128px;
margin: 0 10px;
border: 5px solid transparent;
border-radius: 100%;
}
.form__label, h6 {
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
}
.form__label, h4, h6 {
line-height: 1.2em;
margin-bottom: 20px;
}
h6 {
display: block;
font-size: 0.67em;
-webkit-margin-before: 2.33em;
-webkit-margin-after: 2.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
.write-title {
text-align: center;
margin-top: 18px;
font-size: 13px;
margin-bottom: 60px;
\t position: relative;
left: 235px;
}
.gender-selector input{
-webkit-appearance:none;
-moz-appearance:button;
appearance:button;
margin:0;
padding:0;
}
.man{
background-image:url(https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-512.png);
\t border-color: #1f6ab0;
position: relative;
left: 400px;
bottom: 80px;
\t display: block;
max-width: 100%;
}
.gender-selector:not(input:checked) input:active +.gen-sel{
opacity: .6;
}
.gender-selector input:checked +.gen-sel{
-webkit-filter: none;
-moz-filter: none;
filter: none;
}
.women{
background-image:url(https://cdn1.iconfinder.com/data/icons/user-pictures/100/female1-512.png);
\t border-color: #b24592;
position: relative;
left: 60px;
top: 3px;
\t display: block;
max-width: 100%;
}
.gen-sel{
cursor:pointer;
display:inline-block;
width:100px;
height:70px;
background-size:contain;
background-repeat:no-repeat;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
-moz-filter: brightness(1.8) grayscale(1) opacity(.7);
filter: brightness(1.8) grayscale(1) opacity(.7);
}
.gen-sel:hover{
-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
-moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
filter: brightness(1.2) grayscale(.5) opacity(.9);
}<main class="main ">
<div>
<div class="wrap write"> \t
<div class="write-gender">
<h6 class="write-title">Select gender</h6>
\t <div class="gender-selector">
<input id="gender" type="radio" name="gender" value="w" />
<label class="gen-sel write-gender women" for="gender"></label>
<input id="gender2" type="radio" name="gender2" value="m" />
<label class="gen-sel write-gender man"for="gender2"></label>
</div>
</div>
</div>
</div>
</main>另外我想知道其他的事情： - 我创建了一个数据库来存储这些信息。身份证是“性别”，并在输入html代码中，我调用了一个输入与id - >性别和其他输入id - > gender2在我的PHP代码我已经匹配id性别2与id性别通过使用这个 - >“$ gender2 = & $ gender;”是吗？