前端css技巧

最新推荐文章于 2024-04-26 16:52:43 发布

@一枝梅

最新推荐文章于 2024-04-26 16:52:43 发布

阅读量131

点赞数

文章标签： css3

原文链接：https://www.sohu.com/a/279093167_467792

版权

radio美化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			 .radio-station { 
        position: relative; 
        margin-top: 5px;
        display: inline-block; 
        margin-right: 12px;}
    .radio-station input { 
        vertical-align: middle; 
        margin-top: -2px; 
        margin-bottom: 1px; /* 前面三行代码是为了让radio单选按钮与文字对齐 */ 
        width: 20px; 
        height: 20px; 
        appearance: none;/*清楚默认样式*/ 
        -webkit-appearance: none; 
        opacity: 0; 
        outline: none; /* 注意不能设置为display:none*/
    }
    .radio-station label {
        position: absolute; 
        left: 0;
        top: 0;
        z-index: -1; /*注意层级关系，如果不把label层级设为最低，会遮挡住input而不能单选*/ 
        width: 20px; 
        height: 20px; 
        border: 1px solid #4A90E2; 
        border-radius: 100%;
    }
    .radio-station input:checked+label {
        background: #4A90E2;
    }
    .radio-station input:checked+label::after { 
        content: ""; 
        position: absolute; 
        left: 8px;
        top: 2px; 
        width: 5px; 
        height: 12px; 
        border-right: 1px solid #fff; 
        border-bottom: 1px solid #fff; 
        transform: rotate(45deg);
    }
		</style>
	</head>
	<body>
		<p>您的性别：</p> 
		<div class="radio-sex"> 
			<input type="radio" id="sex1" name="sex"> <label for="sex1"></label> <span>男</span> 
		</div> 
		<div class="radio-sex"> 
			<input type="radio" id="sex2" name="sex"> <label for="sex2"></label> 女 
		</div>
	</body>
</html>

展示效果图
在这里插入图片描述

@一枝梅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端css技巧

radio美化<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .radio-station { position: relative; ...
复制链接

扫一扫