如何让Radio Button选中时保持尺寸，呈现小背景圆圈样式？

我想给单选按钮设置样式，让它选中时呈现如下效果（左侧第一个）：

当前代码 #

CSS 代码 #

@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;
}

HTML 代码 #

<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>

问题说明 #

当前代码中，单选按钮选中时会应用以下规则：

input[type="radio"]:checked + label span {
  transform: scale(1.25);
}

这会导致按钮整体放大，但我想要选中时保持整体尺寸不变，同时背景颜色的圆圈比未选中时更小，边框颜色的设置已经完成，请问该如何实现？

解决方案 #

修改后的核心CSS代码 #

只需要调整选中状态的缩放规则，并优化label的布局方式，确保缩小的背景圆圈居中显示：

/* 替换原来的选中缩放规则 */
input[type="radio"]:checked + label span {
  transform: scale(0.75); /* 改成缩小，数值可根据需求调整 */
}

/* 修改label的布局方式 */
label {
  display: inline-flex; /* 使用flex布局实现居中 */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  cursor: pointer;
  box-sizing: border-box; /* 确保边框不会改变整体尺寸 */
  /* 可选：添加透明默认边框，避免选中时边框出现导致尺寸跳动 */
  border: 2px solid transparent;
}

完整修改后的CSS代码 #

@import url(https://fonts.googleapis.com/css?family=Lato:400,300);

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label span {
  transform: scale(0.75);
}
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-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  cursor: pointer;
  box-sizing: border-box;
  border: 2px solid transparent;
}
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;
}

修改说明 #

1. 调整缩放方向：把选中时的scale(1.25)改为scale(0.75)，让背景颜色的圆圈缩小，而不是整体放大
2. 优化布局居中：将label的display改为inline-flex，并添加align-items: center和justify-content: center，确保缩小的圆圈始终在label的中心位置
3. 避免尺寸跳动：添加box-sizing: border-box和透明默认边框，防止选中时添加边框导致按钮整体尺寸变化

内容的提问来源于Stack Exchange，提问作者Newsha Nik