html css input自定义

完整的代码, 可以复制引用


<!DOCTYPE html>
<html>

<head>
<!-- 设置字符编码为UTF-8 -->
<meta charset="utf-8">
<!-- 为IE浏览器设置兼容模式,优先使用最新的引擎渲染网页 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 设置视窗属性,优化移动设备显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
/* 重置所有元素的内外边距 */
*{
padding:0;
margin:0;
}
/* 设置"creatAccountInput"类的样式 */
.creatAccountInput{
position:relative; /* 设置为相对定位 */
display:inline; /* 设置为内联显示,使其与其他元素在同一行 */
}
/* 当单选按钮未选中时,其后的标签的样式 */
.radioi + .radio-label:before{
display:inline-block; /* 设置为内联块级元素 */
vertical-align:text-bottom; /* 设置垂直对齐方式为文本底部 */
margin:0 .2rem 0 .5rem; /* 设置外边距 */
content: "\a0"; /* 设置内容为空格 */
font-size:.5rem; /* 设置字体大小 */
width: .4rem; /* 设置宽度 */
height: .4rem; /* 设置高度 */
border-radius: 50%; /* 设置边框为圆形 */
border: 1px solid #D81E06; /* 设置边框颜色和大小 */
text-indent: .15em; /* 设置文本缩进 */
padding:.05rem; /* 设置内边距 */
}
/* 当单选按钮被选中时,其后的标签的样式 */
.radioi:checked + .radio-label:before {
background-color: #D81E06; /* 设置背景颜色 */
background-clip: content-box; /* 设置背景裁剪为内容框 */
}
/* 隐藏原始的单选按钮 */
.radioi{
display: none; /* 设置为不显示 */
}
</style>
</head>

<body>
<!-- 创建一个单选按钮和对应的标签 -->
<p class="creatAccountInput">
<input type="radio" name="radio" value="0" checked class="radioi" id="radio1"> <!-- 单选按钮,已默认选中 -->
<label for="radio1" class="radio-label">代理类型</label> <!-- 对应的标签 -->
</p>
<!-- 创建另一个单选按钮和对应的标签 -->
<p class="creatAccountInput">
<input type="radio" name="radio" value="1" class="radioi" id="radio2"> <!-- 单选按钮 -->
<label for="radio2" class="radio-label">玩家类型</label> <!-- 对应的标签 -->
</p>

</body>

</html>

posted on 2021-10-27 15:59  完美前端  阅读(334)  评论(0)    收藏  举报

导航