JS開發(fā)驗(yàn)證表單教學(xué)之樣式（二）
我們先來(lái)看看上節(jié)的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
padding-top:20px;}
.name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
.pwd{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
.email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
.txt{width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;}
.sub{width:100px;height:30px;padding-left:0px;}
.sub:hover{background:#ffaad5;}
.div{width:200px;height:30px;margin:0 auto;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;
border:1px solid red;}
</style>
</style>
</head>
<body>
<div id="div">
<form>
<label>用戶名:</label>
<input type="text" class="name" id="name">
<div id="sp" class="div"></div>
<label>密 碼:</label>
<input type="password" class="pwd" id="pwd">
<div id="sp1" class="div"></div>
<label>郵 箱:</label>
<input type="text" class="email" id="email">
<div id="sp2" class="div"></div>
<label>愛 好:</label>
<textarea rows="5" cols="40" class="txt" id="txt"></textarea>
<div id="sp3" class="div"></div>
<input type="button" class="sub" value="注冊(cè)" id="sub">
</form>
</div>
</body>
</html>首先我們來(lái)移除? input? 方塊的預(yù)設(shè)樣式
outline屬性
完整程式碼如下：
input{outline:none;}
當(dāng)我們把遊標(biāo)當(dāng)在? input? 框裡面的時(shí)候，會(huì)很靠左，這樣就不好看了，所以我們要把遊標(biāo)的位置距離左邊有一定的距離
一般我們使用padding-left，但是會(huì)有個(gè)問題，使用之後文本框也變長(zhǎng)了，這就不是我們想要的效果了
所以當(dāng)我們?cè)诮o文本框的遊標(biāo)加上padding-left屬性的時(shí)候，我們要先寫box-sizing:border-box;
box-sizing:border-box;? 元素的內(nèi)邊距和外邊框不會(huì)增加寬度
所以我們文字方塊的樣式完整程式碼如下：
input{
?? ??? ??? ?outline:none;/*移除文字方塊的邊框*
?? ??padding-left:15px;
}
當(dāng)然文字域也是可以使用的
接下來(lái)我們給文字域做一個(gè)圓角的功能
border-radius:8px;
文字域我們預(yù)設(shè)看有下角??會(huì)有兩個(gè)條斜線，這個(gè)我們也是可以去除的
我們使用resize : none; 就可以吧文字域的斜線去掉
下面我們來(lái)看以下寫完整的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
padding-top:20px;}
input{
outline:none;
box-sizing:border-box;padding-left:15px;}
textarea{
outline:none;resize : none;
box-sizing:border-box;padding-left:15px;padding-top:5px;}
.name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.pwd{width:200px;height:30px;
margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.txt{
width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.sub{width:100px;height:30px;padding-left:0px;
border:none;
border-radius:5px;background:#ffd0ff;}
.sub:hover{background:#ffaad5;}
.div{
width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;}
</style>
</head>
<body>
<div id="div">
<form>
<label>用戶名:</label>
<input type="text" class="name" id="name">
<div id="sp" class="div"></div>
<label>密 碼:</label>
<input type="password" class="pwd" id="pwd">
<div id="sp1" class="div"></div>
<label>郵 箱:</label>
<input type="text" class="email" id="email">
<div id="sp2" class="div"></div>
<label>愛 好:</label>
<textarea rows="5" cols="40" class="txt" id="txt"></textarea>
<div id="sp3" class="div"></div>
<input type="button" class="sub" value="注冊(cè)" id="sub">
</form>
</div>
</body>
</html> 
