<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
i{
font-style:normal;
}
input[type="radio"] {
display:none;
}
input[type="radio"]:before {
content: "$";
}
input[type="radio"]+i::before {
content: "\2610";
}
input[type="radio"]:checked+i::before {
content: "\2611";
}
</style>
</head>
<body>
<label><input type="radio" name="radio" value="1"><i></i> Checkbox 1</label>
<label><input type="radio" name="radio" value="2"><i></i> Checkbox 2</label>
</body>
</html>
Result:
before click:
After click:
Reference:
https://www.w3schools.com/cssref/sel_before.asphttps://www.w3schools.com/cssref/sel_element_pluss.asp
https://stackoverflow.com/questions/658044/tick-symbol-in-html-xhtml
https://jingyan.baidu.com/article/7f766daff77ecf4101e1d0f6.html
No comments :
Post a Comment