修改radio单选按钮样式

小郑！

已于 2023-04-04 10:48:36 修改

阅读量816

点赞数

文章标签： html css

于 2021-08-25 14:39:14 首次发布

本文链接：https://blog.csdn.net/qq_45479398/article/details/119910911

版权

这篇博客主要展示了如何使用CSS修改radio单选按钮和checkbox复选框的默认样式。通过设置不同的伪类和属性，实现了选中前后的不同视觉效果，包括边框颜色、内填充和文字符号的展示，提升了用户界面的美观度。

摘要由CSDN通过智能技术生成

修改radio单选按钮样式

input {
width: 0.34rem;
height: 0.34rem;
appearance: none;
position: relative;
outline: none;
}
input:before {
content: “”;
width: 0.34rem;
height: 0.34rem;
border: 1px solid #00d4d0;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}

input:checked:before {
content: “”;
width: 0.34rem;
height: 0.34rem;
border: 1px solid #00d4d0;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
input:checked:after {
content: “”;
width: 0.2rem;
height: 0.2rem;
text-align: center;
background: #00d4d0;
border-radius: 50%;
display: block;
position: absolute;
top: 0.09rem;
left: 0.1rem;
}

选中前
在这里插入图片描述

选中后
在这里插入图片描述

修改多选样式

input[type='checkbox'] {
    position: relative;
    cursor: pointer;
    width: 0.26rem;
    height: 0.26rem;
    font-size: 0.12rem;
  }

  input[type='checkbox']:checked::after {
    position: absolute;
    top: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 0.26rem;
    height: 0.26rem;
    content: '✓';
    color: #fff;
    font-size: 0.12rem;
    font-weight: 700;
    background-color: #00D4D0;
    border-radius: 0.02rem;
  }

在这里插入图片描述