原来的效果
美化之后的效果
实现代码
<style>.container {margin:0auto;width:620px;}fieldset {padding:18px;background-color:#c7fff5;}fieldset legend {font-size: larger;border:1px darkgray solid;padding:10px;background-color: white;}input[type="text"],input[type="tel"],input[type="email"],textarea {display: block;width:96%;padding:2%;margin:0020px0;border:1px solid silver;/*为输入控件添加border，使之与label对齐*/border-top: none;font-size:12px;}textarea {resize: none;/*不允许调整textarea的大小，但IE浏览器本身就不支持调整textarea的大小*/}label {display: block;width:98%;padding:1%;font-size:12px;background-color: cornflowerblue;color: aliceblue;border:1px solid slategray;/*为label元素添加border元素使之与输入控件对齐*/}input[type="reset"], input[type="submit"]{margin:10px30px;background-color: darkorange;color: white;padding:5px;height:45px;width:80px;border:0;}input[type="reset"], input[type="submit"]:hover {cursor: pointer;border-color: royalblue;}input[type="reset"], input[type="submit"]:active {cursor: pointer;border-color: black;outline-color: cornflowerblue;}</style></head><body><divclass="container"><h2>应用样式美化表单</h2><hr/><form><fieldset><legend>Contact</legend><labelfor="userName">Name:</label><inputtype="text"id="userName"><br/><labelfor="userEmail">Email Address:</label><inputtype="email"name="userEmail"id="userEmail"><br/><labelfor="homeAddress">Address:</label><inputtype="text"id="homeAddress"><br/><labelfor="phoneNum">Phone Number:</label><inputtype="tel"id="phoneNum"><br/><labelfor="messages">Messages:</label><textareaid="messages"cols="10"rows="2"></textarea></fieldset><inputtype="reset"value="Reset"> <inputtype="submit"value="Submit"></form></div>
注意点：
IE浏览器并不支持对textarea 的大小调整；
运用选择器注意范围，属性选择器可以实现同一类型样式的调整；
要学着应用百分比写控件的宽度与高度；