重寫按鈕樣式

時間 2019-11-21

標籤重寫按鈕樣式简体版

原文原文鏈接

1.單選按鈕

樣式1

代碼:javascript

<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>按鈕列表</title>
	<style type="text/css">
		body{
			margin:0;
			padding:0;
		}
		#container{
			width:500px;
			margin: 0 auto;
			height:500px;
		}
		.radio-item{
			position:relative;
		}
		.radio-item .radio-text{
			position:relative;
			top:-6px;
			display: inline-block;
		}
		input[type="radio"]{
			width:20px;
			height: 20px;
			opacity: 0;
		}
		input[type="radio"]+label{
			position:absolute;
			left:4px;
			top:2px;
		    width: 20px;
		    height: 20px;
		    border-radius: 50%;
		    border: 1px solid #f2f2f2;
		}
		input[type="radio"]:checked+label{
			background:#999;
			border:1px solid #999;
		}
		input[type="radio"]:checked+label:after{
			position: absolute;
		    left: 7px;
		    top: 2px;
		    content: "";
		    width: 5px;
		    height: 12px;
		    border: 2px solid #fff;
		    border-left: none;
		    border-top: none;
		    transform: rotate(45deg);
		}
	</style>
	<script type="text/javascript" src="../vendor/jquery-1.11.3.min.js" ></script>
</head>
<body>
	<div id="container">
		<div class="radio-item">
			<input type="radio" id="item1" name="item1" checked/>
			<label for="item1"></label>
			<label for="item1" class="radio-text">選項一</label>
		</div>
		<div class="radio-item">
			<input type="radio" id="item2" name="item1"/>
			<label for="item2"></label>
			<label for="item2" class="radio-text">選項二</label>
		</div>
	</div>
	<script>
		$(document).ready(function(){
			
		});
	</script>
</body>
</html>

樣式2

代碼：對以上代碼，作以下修改便可css

input[type="radio"]:checked+label{
	/*修改此處，就是修改按鈕外邊框的樣式*/
	/*background:#999;*/
	border:1px solid #999;
}
input[type="radio"]:checked+label:after{
	/*修改此處就是修改按鈕選中狀態的樣式*/
	position: absolute;
	left: 5px;
	top: 5px;
    content: "";
	width: 10px;
	height: 10px;
	background: #999;
	border-radius: 50%;
}

2.多選按鈕

樣式1

代碼：html

<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>按鈕列表</title>
	<style type="text/css">
		body{
			margin:0;
			padding:0;
		}
		#container{
			width:500px;
			margin: 0 auto;
			height:500px;
		}
		.radio-item{
			position:relative;
		}
		.radio-item .radio-text{
			position:relative;
			top:-6px;
			display: inline-block;
		}
		input[type="checkbox"]{
			width:20px;
			height: 20px;
			opacity: 0;
		}
		input[type="checkbox"]+label{
			position:absolute;
			left:4px;
			top:2px;
		    width: 20px;
		    height: 20px;
		    /*border-radius: 50%;*/
		    border: 1px solid #f2f2f2;
		}
		input[type="checkbox"]:checked+label{
			/*修改此處，就是修改按鈕外邊框的樣式*/
			/*background:#999;*/
			border:1px solid #999;
		}
		input[type="checkbox"]:checked+label:after{
			/*修改此處就是修改按鈕選中狀態的樣式*/
			    position: absolute;
			    left: 5px;
			    top: 5px;
			    content: "";
			    width: 10px;
			    height: 10px;
			    background: #999;
			    /*border-radius: 50%;*/
		}
	</style>
	<script type="text/javascript" src="../vendor/jquery-1.11.3.min.js" ></script>
</head>
<body>
	<div id="container">
		<div class="radio-item">
			<input type="checkbox" id="item1" name="item1" checked/>
			<label for="item1"></label>
			<label for="item1" class="radio-text">選項一</label>
		</div>
		<div class="radio-item">
			<input type="checkbox" id="item2" name="item1"/>
			<label for="item2"></label>
			<label for="item2" class="radio-text">選項二</label>
		</div>
		<div class="radio-item">
			<input type="checkbox" id="item3" name="item1" checked/>
			<label for="item3"></label>
			<label for="item3" class="radio-text">選項三</label>
		</div>
		<div class="radio-item">
			<input type="checkbox" id="item4" name="item1"/>
			<label for="item4"></label>
			<label for="item4" class="radio-text">選項四</label>
		</div>
	</div>
	<script>
		$(document).ready(function(){
			
		});
	</script>
</body>
</html>

樣式2

代碼：對以上代碼作以下修改java

input[type="checkbox"]:checked+label{
	background:#999;
	border:1px solid #999;
}
input[type="checkbox"]:checked+label:after{
	position: absolute;
	left: 7px;
	top: 2px;
	content: "";
	width: 5px;
	height: 12px;
	border: 2px solid #fff;
	border-left: none;
	border-top: none;
	transform: rotate(45deg);
}

註釋：以上我是針對的radio，checkbox單獨進行了樣式設計，防止，一個頁面不一樣的按鈕需求，若是一個頁面上，按鈕樣式統一，選擇器input[type="radio"]或input[type="checkbox"]替換爲inputjquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。