我正在try 设置单选按钮的样式，以便当 Select 一个按钮时，它看起来像这样(左/第一个):
这是我到目前为止掌握的代码:
@import url(https://fonts.googleapis.com/css?family=Lato:400,300);
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label span {
transform: scale(1.25);
}
input[type="radio"]:checked + label .red {
border: 2px solid #711313;
}
input[type="radio"]:checked + label .orange {
border: 2px solid #873a08;
}
input[type="radio"]:checked + label .yellow {
border: 2px solid #816102;
}
input[type="radio"]:checked + label .olive {
border: 2px solid #505a0b;
}
input[type="radio"]:checked + label .green {
border: 2px solid #0e4e1d;
}
input[type="radio"]:checked + label .teal {
border: 2px solid #003633;
}
input[type="radio"]:checked + label .blue {
border: 2px solid #103f62;
}
input[type="radio"]:checked + label .violet {
border: 2px solid #321a64;
}
input[type="radio"]:checked + label .purple {
border: 2px solid #501962;
}
input[type="radio"]:checked + label .pink {
border: 2px solid #851554;
}
label {
display: inline-block;
width: 36px;
height: 36px;
margin-right: 10px;
cursor: pointer;
}
label:hover span {
transform: scale(1.25);
}
label span {
display: block;
width: 100%;
height: 100%;
transition: transform 0.2s ease-in-out;
border-radius: 50%;
}
label span.red {
background: #db2828;
}
label span.orange {
background: #f2711c;
}
label span.yellow {
background: #fbbd08;
}
label span.olive {
background: #b5cc18;
}
label span.green {
background: #21ba45;
}
label span.teal {
background: #00b5ad;
}
label span.blue {
background: #2185d0;
}
label span.violet {
background: #6435c9;
}
label span.purple {
background: #a333c8;
}
label span.pink {
background: #e03997;
}<h1>Radio Color Picker</h1>
<input type="radio" name="color" id="red" value="red" />
<label for="red"><span class="red"></span></label>
<input type="radio" name="color" id="green" />
<label for="green"><span class="green"></span></label>
<input type="radio" name="color" id="yellow" />
<label for="yellow"><span class="yellow"></span></label>
<input type="radio" name="color" id="olive" />
<label for="olive"><span class="olive"></span></label>
<input type="radio" name="color" id="orange" />
<label for="orange"><span class="orange"></span></label>
<input type="radio" name="color" id="teal" />
<label for="teal"><span class="teal"></span></label>
<input type="radio" name="color" id="blue" />
<label for="blue"><span class="blue"></span></label>
<input type="radio" name="color" id="violet" />
<label for="violet"><span class="violet"></span></label>
<input type="radio" name="color" id="purple" />
<label for="purple"><span class="purple"></span></label>
<input type="radio" name="color" id="pink" />
<label for="pink"><span class="pink"></span></label>如您所见，在此代码中，当您 Select 一个单选按钮时，将添加以下规则:
input[type="radio"]:checked + label span {
transform: scale(1.25);
}
因此，当按钮被选中时，它们将变得更大.但我希望它们的尺寸保持不变，背景 colored颜色 覆盖的圆圈比其他 colored颜色 小.添加边框 colored颜色 的部分已经存在.我怎么才能做到这一点呢？