表单美化css

来源：互联网发布：销售团队励志视频知乎编辑：程序博客网时间：2024/05/17 08:31
<!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}/*文本框与图片垂直居中对齐*/.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>内容：</span><textarea class="input_area2"></textarea><br /><input type="text" name="keyword" value="请输入产品名" onClick="if(this.value=='请输入产品名'){this.value='';}" onBlur="if(this.value==''){this.value='请输入产品名';}" class="ipt" /><br /><input type="submit" class="inputS" value=" 提 交 " /><input type="reset" class="inputRes" value=" 重 置 " /></body></html>
0 0