表单美化css
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單美化</title>
<style>
input,img,span,textarea{vertical-align:middle}/*文本框與圖片垂直居中對(duì)齊*/
.ipt {padding: 4px 5px;border: #ABABAB 1px solid;box-shadow: 2px 2px 3px #EDEDED inset;font-size: 14px;font-weight: bold;border-radius: 3px
}.ipt:hover {border-color: #7B7B7B
}.ipt:focus {border-color: #3061C6
}
.inputS {border: medium none;background: #909090;color: #fff;display: inline-block;width: 48px;height: 25px;vertical-align:middle;cursor: pointer;margin-right: 12px;padding: 0px;Letter-spacing: -2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;
}
.input_area2 {color: #fff;border: solid 1px #a5aeb6;font-size: 12px;line-height: 30px;width: 389px;height: 120px;padding: 2px 10px;*margin-top: -1px;background: url("../images/bg_input.png") repeat-x scroll 0 -72px;background-color: #909090
}
.inputRes {border: medium none;background: #808080;color: #fff;display: inline-block;width: 48px;height: 25px;vertical-align:middle;cursor: pointer;padding: 0px;Letter-spacing: -2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;
}.inputS:hover,.inputRes:hover {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;border: medium none;-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
</style>
</head><body>
<span>用戶名：</span><input type="text" class="ipt" name="username" id="username" /><br />
<span>內(nèi)容：</span><textarea class="input_area2"></textarea><br />
<input type="text" name="keyword" value="請(qǐng)輸入產(chǎn)品名" onClick="if(this.value=='請(qǐng)輸入產(chǎn)品名'){this.value='';}" onBlur="if(this.value==''){this.value='請(qǐng)輸入產(chǎn)品名';}" class="ipt" /><br />
<input type="submit" class="inputS" value=" 提 交 " />
<input type="reset" class="inputRes" value=" 重 置 " />
</body>
</html>
總結(jié)
- 上一篇： 【简易设计模式07】适配器模式
- 下一篇： （附源码）计算机毕业设计SSM久宠宠物店