自定义多选框样式html,CSS/HTML复选框自定义样式

CSS/HTML复选框自定义样式

话不多说 直接上代码

HTML

CSS

/* 自定义复选框样式 */

.circle-check>input[type="checkbox"] {

width: 1.54rem;

height: 1.54rem;

display: inline-block;

text-align: center;

vertical-align: baseline;

line-height: 1.54rem;

position: relative;

border-radius: 50%;

outline: none;

-webkit-appearance: none;

border: 1px solid #fff;

-webkit-tab-highlight-color: rgba(0, 0, 0, 0);

color: #fff;

background: #fff;

}

.circle-check>input[type="checkbox"]::before {

content: "";

position: absolute;

top: 0;

left: 0;

background: #fff;

width: 100%;

height: 100%;

border: 1px solid #999999;

border-radius: 50%;

color: #fff;

}

.circle-ch