可以使用CSS样式来修改HTML中的radio
按钮大小。以下是一些示例代码:
- 使用
transform: scale()
属性
<label>
<input type="radio" name="option">
Option 1
</label>
<style>
input[type=radio] {
transform: scale(2);
margin-right: 8px;
}
</style>
上述示例将<input>
元素的大小增加倍数为2,但是也会使得 checkbox 按钮出现虚线框并缩小了内部内容。
- 使用
::before
伪元素
<label>
<input type="radio" name="option">
Option 2
</label>
<style>
input[type=radio] {
position: relative;
cursor: pointer;
width: 24px;
height: 24px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
outline: none;
border: 2px solid #ccc;
}
input[type=radio]::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border-radius: 50%;
background-color: #777;
transform: scale(0);
transition: 0.3s ease;
}
input[type=radio]:checked::before {
background-color: #1abb9c;
transform: scale(1);
}
</style>
上述示例对<input>
元素使用了自定义样式,并使用伪元素::before
在按钮内部创建了一个圆形容器。通过为伪元素和样式增加简单的动画效果,可以增加更好的用户体验。
需要注意的是,上述代码仅适用于单选按钮radio
,并不适用于复选按钮(checkbox)。