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

12 Comments

  • bahis oyna
    Posted 2024-06-12 06:02

    I loved as much as you will receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get bought an shakiness over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly a lot often inside case you shield this increase.| Alan Isabella

  • 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