自定义原生多选/单选框样式

2024-01-07 20:26:01

效果图：

input{margin-right:6px;width:.16rem;height:.16rem;border:1px solid #ccd5db;background-color:#fff;-webkit-appearance: none;appearance: none;outline: none;}
input[type="checkbox"]{position:relative;border-color:#ccd5db;}
input[type="checkbox"]:checked{color: #fff;background-color:rgba(159,0,0);border: 1px solid rgba(159,0,0);}
input[type="checkbox"]:checked:after {top:-3px;left:1px;content: "\2713";position:absolute;}
input[type=radio]{border-radius: 50%;display: flex;align-items: center;justify-content: center;}
input[type=radio]:checked {background-color:rgba(159,0,0);border: 1px solid rgba(159,0,0);}
input[type=radio]:after {content: " ";width: 8px;height: 8px;background: #fff;border-radius: 50%;}

文章来源:https://blog.csdn.net/qq_17211063/article/details/135401760
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。