自定义单选框和复选框样式

作者：曹え 5811
发布时间：2022-03-02 02:35:04
浏览次数：263

代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>基围虾课堂</title>
  <meta name="renderer" content="webkit">
  <meta name="format-detection" content="telephone=no"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    
  <link rel="stylesheet" href="css/cui.css" />
  <link rel="stylesheet" href="css/style.css" />
  
 <style> 
 
 .wp{
	 max-width: 600px;
	 margin: 0 auto;
	 text-align: center;
 }
 
 /* 复选框 */
  input[type="checkbox"] {
    background-color: #fff;
    -webkit-appearance: none;
    outline: none;
  }
  
  label {
	  background-color: #eee; -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  padding:5px 20px;
  display: inline-block;
  }
  
  input[type="checkbox"]:checked + label{
     background-color: #5ac725;
	 color:#fff;
  }
  
  /* 单选框 */
  input[type="radio"] {
    background-color: #fff;
    -webkit-appearance: none;
    outline: none;
  }
  
  input[type="radio"]:checked + label{
    background-color: #3c9cff;
    color:#fff;
  }
 </style>
 
</head>
<body>
	
	<div class="wp">
		 复选框：
		<input type="checkbox" id="checkbox1"><label for="checkbox1">123</label>
		<input type="checkbox" id="checkbox2"><label for="checkbox2">23</label>
		
		<hr>
			 
			单选框：<input type="radio" id="checkbox11" name="type"><label for="checkbox11">123</label>
			<input type="radio" id="checkbox22" name="type"><label for="checkbox22">23</label>
   </div>
   
</body>
</html>

预览[刷新]

320 360 460 768 960 1024 1280 1366 1460 1680 75% 全屏