Skip to content Skip to sidebar Skip to footer

纯CSS美化checkbox,radio

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3美化单选复选框-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.ul_box {
	margin:0 auto;
	padding:0;
	list-style:none;
	width:600px;
}
.ul_box>li {
	padding:10px 10px 0 10px;
	overflow:hidden;
	border-bottom:#e5e5e5 solid 1px;
}
.ul_box>li:last-child {
	border-bottom:none;
}
.ul_box>li>div {
	float:left;
}
.ul_box>li>div:nth-child(1) {
	width:100px;
}
.ul_box>li>div:nth-child(2) {
	width:480px;
	overflow:hidden;
}
.label_box>label {
	display:block;
	float:left;
	margin:0 10px 10px 0;
	position:relative;
	overflow:hidden;
}
.label_box>label>input {
	position:absolute;
	top:0;
	left:-20px;
}
.label_box>label>div {
	width:100px;
	text-align:center;
	border:#dddddd solid 1px;
	height:40px;
	line-height:40px;
	color:#666666;
	user-select:none;
	overflow:hidden;
	position:relative;
}
.label_box>label>input:checked + div {
	border:#d51917 solid 1px;
	color:#d51917;
}
.label_box>label>input:checked + div:after {
	content:'';
	display:block;
	width:20px;
	height:20px;
	background-color:#d51917;
	transform:skewY(-45deg);
	position:absolute;
	bottom:-10px;
	right:0;
	z-index:1;
}
.label_box>label>input:checked + div:before {
	content:'';
	display:block;
	width:3px;
	height:8px;
	border-right:#ffffff solid 2px;
	border-bottom:#ffffff solid 2px;
	transform:rotate(35deg);
	position:absolute;
	bottom:2px;
	right:4px;
	z-index:2;
}
</style>
</head>
<body>
<h1 style="text-align: center;">纯CSS美化单选/复选框</h1>
<ul class="ul_box">
    <li>
        <div>单选框:</div>
        <div class="label_box">
            <label>
                    <input type="radio" name="sex">
                    <div>男</div>
                </label>
            <label>
                    <input type="radio" name="sex">
                    <div>女</div>
                </label>
        </div>
    </li>
    <li>
        <div>复选框:</div>
        <div class="label_box">
            <label>
                    <input type="checkbox" name="hobby">
                    <div>旅游</div>
                </label>
            <label>
                    <input type="checkbox" name="hobby">
                    <div>爬山</div>
                </label>
            <label>
                    <input type="checkbox" name="hobby">
                    <div>游泳</div>
                </label>
        </div>
    </li>
</ul>
<h5 style="text-align: center;">helang.love@qq.com</h5>

<script>

</script>

</body>
</html>

原文地址:https://www.jq22.com/webqd5106

11 Comments

  • hdfilmcehennemi
    Posted 2022-12-08 22:15

    Hi there, just wanted to say, I enjoyed this article. Jamaal Pennachio

  • adult dating
    Posted 2022-08-20 15:01

    Hi my loved one! I wish to say that this article is amazing, nice written and include approximately all vital infos. Tony Jewkes

  • bets10 giris
    Posted 2022-08-20 14:00

    You made a number of fine points there. I did a search on the subject matter and found nearly all persons will consent with your blog. Gustavo Zaeske

  • online bahis casino
    Posted 2022-08-16 12:33

    You have brought up a very wonderful points , thankyou for the post. Cesar Leady

  • sex
    Posted 2022-08-09 18:21

    Really enjoyed this blog article. Thanks Again. Cool. Jarred Lindquist

  • casino
    Posted 2022-08-09 17:39

    Undeniably imagine that which you stated. Your favourite justification seemed to be on the internet the easiest factor to understand of. Jae Kasprowicz

  • casino
    Posted 2022-08-07 03:15

    Only wanna remark that you have a very nice internet site , I the design it actually stands out. Neil Floras

  • viagra
    Posted 2022-07-31 00:09

    Paragraph writing is also a fun, if you be acquainted with after that you can write if not it is complicated to write. Jessie Lightning

  • eskort bayan
    Posted 2022-07-30 11:45

    Asking questions are in fact fastidious thing if you are not understanding something fully, but this article presents pleasant understanding yet. Parker Dicaprio

  • bahis
    Posted 2022-07-29 14:32

    If some one wishes expert view on the topic of running a blog afterward i suggest him/her to pay a visit this web site, Keep up the pleasant work. Lewis Snead

  • wife
    Posted 2022-07-20 17:22

    You have done an impressivejob and our whole community will be grateful to you. Herbert Moretta

Leave a comment