<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.condition input {
display: inline-block;
vertical-align: middle;
/* 当成为行内块元素时它就可以垂直居中了 */
width: 20px;
height: 20px;
-webkit-appearance: none;
/* 清除原有的样式 */
background-color: transparent;
border: 0;
outline: 0 !important;
/* 去掉点击后外面可能会出现的蓝框 */
line-height: 20px;
color: #d8d8d8;
}
.condition input:after {
/* //在input的内容之后插入新内容 */
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
line-height: 14px;
font-size: 16px;
color: #fff;
border: 3px solid #ddd;
background-color: #fff;
box-sizing: border-box;
/* 规定两个并排的带边框的框 */
}
.condition input:checked:after {
/* 选中之后的样子 */
content: "L";
transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
/* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
-webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
border-color: #099414;
background-color: #099414;
}
</style>
</head>
<body>
<div class="condition">
<input name="sex" type="radio">
<input name="sex" type="radio">
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/fanting/p/9876785.html
时间： 2024-07-30 15:14:11