//html <input type="checkbox" class="check"> //css .check { background-color: #8BC34A; width: 40px; -webkit-appearance: none; appearance: none; } .check::after { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#fff" stroke-width="3"/></svg>'); }
Pseudo-class transformation CHECKBOX style in CSS3
Collect the skills you see. In CSS3, you can do it, for example, the original CHECKBOX is square and becomes circular; the method is to use pseudo-classes:
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=327038292&siteId=291194637
Recommended
Ranking