css經常使用樣式

時間 2019-11-20
標籤 css 經常使用樣式欄目 CSS 简体版
原文原文鏈接
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=640,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
		<title></title>
		<style type="text/css">
			html,body{
				font-size: 16px;
				width:100%; 
				
				
			}
			*{
			    -webkit-tap-highlight-color: transparent;
			    box-sizing: border-box;
			    padding:0;margin:0;
			}
			input[type='text'],textarea{
				-webkit-appearance: textfield;
			    -webkit-rtl-ordering: logical;
			    cursor: text;
			    border-style: inset;
			    border-color: initial;
			    border-image: initial;
			    display: inline-block;
			    border:none;
			    width: 200px;
			    height: 32px;
			    line-height: 1.5;
			    padding: 4px 7px;
			    font-size: 12px;
			    border: 1px solid #dddee1;
			    border-radius: 4px;
			    color: #495060;
			    background-color: #fff;
			    background-image: none;
			    position: relative;
			    transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;		
			    outline:none;
			}

			textarea{
				resize:none
			}
			/*單選按鈕*/
			input[type="radio"] + label::before {
			    content: "\a0"; /*不換行空格*/
			    display: inline-block;
			    vertical-align: middle;
			    font-size: 14px;
			    width: 16px;
			    height: 16px;
			    border-radius: 50%;
			    text-indent: 3px;
			    line-height: 1; 
			    background:url(http://www.geekso.com/demo_css/1.gif) no-repeat center 0px;
			}
			input[type="radio"]:checked + label::before {
			    	background:url(http://www.geekso.com/demo_css/1.gif) no-repeat center -14px;
			}
			input[type="checkbox"] + label::before {
			    content: "\a0"; /*不換行空格*/
			    display: inline-block;
			    vertical-align: middle;
			    font-size: 14px;
			    width: 15px;
			    height: 15px;
			    text-indent: 3px;
			    line-height: 1; 
			    border:solid 1px #DDDEE1;
			   /* background:url(http://www.geekso.com/demo_css/1.gif) no-repeat center 0px;*/
			}
			input[type="checkbox"]:checked + label::before {
			    background-clip: border-box;
			    /*background:#495060;*/
			    display: inline-block;
			   border:solid 1px #495060;
			   content: "\2714";
			   /*	background:url(http://www.geekso.com/demo_css/1.gif) no-repeat center -14px;*/
			}
			input[type="radio"]{
				visibility: hidden;
			}
			input[type="checkbox"]{
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div>
			<div class='header'>
				<span >aaaaaaaaaaa</span>
				<input type="text" />
			</div>
			<div style="font-size:0;">
				<label style='vertical-align: middle;display: inline-block;'>
					<img  src='img/one.png' style='height:40px;width:40px;'/>
				</label>
				<!--<input type="radio" name="" id="" value="11" style='vertical-align: middle;display: inline-block;'/>-->
				<textarea name="" rows="" cols="" style='vertical-align: middle;display: inline-block;'></textarea>
			</div>
			自定義單選美化
			<div class="female radio">
			    <input type="radio" id="female" name="sex" checked/>
			    <label for="female" onClick="clickRadio()">女</label>
			</div>
			<div class="male radio">                
			    <input type="radio" id="male" name="sex"/>
			    <label for="male" onClick="clickRadio()">男</label>
			</div>
			自定義多選美化
			<div class="male radio">                
			    <input type="checkbox" id="male1" name="sex1"/>
			    <label for="male1" onClick="clickRadio()">男</label>
			</div>
			<div class="male radio">                
			    <input type="checkbox" id="male2" name="sex1" checked/>
			    <label for="male2" onClick="clickRadio()">男</label>
			</div>
		</div>
		<script>
			function clickRadio(){
				console.log(document.getElementsByTagName('input'));
			}
			
		</script>
	</body>
</html>