CSS优化表单元素样式

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>CSS优化表单元素</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
		/*输入框*/
		/*background:url()设置背景图片，需要同时设置background-size属性来是的背景图片和元素大小适应
		background-size属性包括:auto(图片默认大小):
		                      :width height(设置长和宽的像素大小可以和文本框大小相同)
		                      :百分比(是相当于文本框的大小百分比)
		                      :cover(覆盖文本框)
		                      :contain(缩放图片来靠近容器边缘显示)
		*/
		.text1{border:1px solid #f60;color:#03C;}
		.text2{border:2px solid #390;width:200px;height:24px;font-size:16px;font-weight:bold;line-height:1.6;}
		.text3{border:2px solid #C3C;height:150px;width:150px;background:#ffeeff url(images/3.jpg)left 3px no-repeat ;background-size:150px 150px;}
		.text4{border:1px solid #F90;width:150px;height:150px;font-size:16px;line-height:1.6;background:#ffeeff url(images/4.jpg)0 0px no-repeat ;background-size:150px 150px;}
		.area{border:1px solid #F90;overflow :auto;width:90%;height:150px;background:#fff url(images/4.jpg) right bottom no-repeat;background-size:90% 150px;}
		
		/*按钮*/
		.btn1{background:#fff url(images/side_bg.gif) 0 0;height:22px;width:55px;color:#297744;border:1px solid #90abcd;font-size:12px;font-weight:bold;line-height:180%;cursor:pointer;}
		.btn2{background:url(images/side_bg.gif) 0 -25px;width:70px;height:22px;color:#6a1234;border:1px solid #aabb19;font-size:12px;line-height:1.6;cursor:pointer;}
		/* 不设置宽度可以根据文字长度自适应 */
		.btn3{background:url(images/submit_bg.gif) 0px -8px;border:1px solid #ccaabb;height:30px;font-weight:bold;padding-top:1px;cursor:pointer;font-size:12px;color:#334455;}
		.btn4{background:url(images/srn_bg.gif) 0 0 no-repeat;width:100px;height:35px;border:none;font-size:12px;font-weight:bold;color:#aa00aa;cursor:pointer;}
		
		select{background:#FF8;width:100px;height:30px;border:1px solid #fff;}
		.sticker{background:#fff;width:50px;height:100px;border:1px solid #ccc;position:absolute;left:40px;top:800px;font-size:12px;padding:5px;}
	</style>
  </head>
  
  <body>
  	<!-- 输入框 -->
    <p>
    	<input type="text" name="textfield" id="textfield"/>这是默认样式
    </p>
    <p>
    	<input type="text" name="textfield2" id="textfield2" class="text1" value="I'm blue."/>改变边框样式和文字颜色
    </p>
    <p>
    	<input type="text" name="textfield3" id="textfield3" class="text2" value="I'm big."/>改变边框样式和文字颜色
    </p>
    <p>
    	<input type="text" name="textfield4" id="textfield4" class="text3"/>增加背景图片
    </p>
    <p>
    	<input type="text" name="textfield5" id="textfield5" class="text4"/>增加背景图片
    </p>
    <p>
    	<textarea name="textarea" id="textarea" class="area" clos="45" rows="5"></textarea>
    </p>
    
    <!-- 按钮 -->
    <p>
		<input name="button1" type="submit" class="btn1" id="button1" value="提交" />
	</p>
	<p>
		<input name="button2" type="submit" class="btn2" id="button2" value="提交" />
	</p>
	<p>
		<input name="button3" type="submit" class="btn3" id="button3" value="按钮自适应宽度" />
	</p>
	<p>
		<input name="button4" type="submit" class="btn4" id="button4" value="注册账号" />
	</p>

	<!-- 下拉列表 -->
	<select id="select" name="select" class="select">
		<option>请选择</option>
		<option>北京</option>
		<option>上海</option>
		<option>天津</option>
		<option>重庆</option>
	</select>
	<div class="sticker">我是分割线-----</div>
	
	<!-- 用户资料label美化样式 -->
	<p>
		<label for="username">用户名：</label>
		<input id="username" name="username" type="text"/>
	</p>
	<p>
		<label for="password">密码  ：</label>
		<input id="password" name="password" type="password"/>
	</p>
	<p>性别：
		<input type="radio" name="sex" id="male" value="radio1"/><label for="male">男</label>
		<input type="radio" name="sex" id="female" value="radio2"/><label for="female">女</label>
	</p>
	<p>爱好：
		<input type="checkbox" name="footing" id="footing"/><label for="footing">徒步</label>
		<input type="checkbox" name="music" id="music"/><label for="music">音乐</label>
		<input type="checkbox" name="travel" id=""travel""/><label for=""travel"">旅游</label>
	</p>
	<p> </p>
  </body>
</html>
CSS优化表单元素样式

猜你喜欢
