<style>
/* 隐藏原始的输入框 */
input[type="radio"] {
display: none;
}
/* 设定自定义按钮样式 */
.radio-button {
margin-right: 15px;
margin-left: 15px;
margin-bottom: 8px;
}
/* 自定义按钮的选中状态样式 */
.radio-button .custom-radio-button {
width: 62px;
height: 22px;
background-color: white;
border: 1px solid #d2d1d1;
float: left;
text-align: center;
line-height: 22px;
}
/* 鼠标悬停时的样式,可选 */
.radio-button:hover .custom-radio-button {
border-color: #555;
}
/* 选中状态时的样式 */
input[type="radio"]:checked + .custom-radio-button {
background-color: #d4f1d7;
}
/* 禁用状态样式,可选 */
input[type="radio"]:disabled + .custom-radio-button {
opacity: 0.6;
cursor: not-allowed;
}
</style>
<body>
<label class="radio-button">
<input type="radio" name="my-radio" value="1" disabled>
<span class="custom-radio-button">radio</span>
</label>
</body>