表单在浏览器下的统一表现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>input等在各个浏览器下的表现统一</title>
<style>
body{
margin:0;
padding:1px;
font-family:"Microsoft YaHei",Arial,SimSun,Tahoma;
font-size:12px;
background:url(page-bg.gif) 0 0 repeat;
}
h1{
margin:0;
padding:0;
height:69px;
color:#263a66;
font-size:20px;
}
h2{
margin:1px 0 0;
padding:0;
font-size:12px;
height:35px;
}
div{
height:105px;
}
ul{
margin:0;
padding:0;
list-style:none;
}
li{
height:32px;
}
label{
clear:left;
float:left;
width:119px;
height:19px;
line-height:19px;
_line-height:20px;
overflow:hidden;
text-align:right;
cursor:pointer;
}
input{
color:#666;
font-size:12px;
}
textarea{
width:400px;
height:5em;
margin:0 0 0 4px;
*margin:-1px 0 0 4px;
_margin:-1px 0 0 2px;
padding:3px;
color:#666;
font-size:12px;
border:1px solid #a7a6aa;
background:#FFF url(input-bg.gif) 0 0 no-repeat;
}
input{
margin:0 5px 0 5px;
*margin:-1px 5px 0 5px;
padding:3px;
width:219px;
height:12px;
border:1px solid #a7a6aa;
background:#FFF url(input-bg.gif) 0 0 no-repeat;
}
input{
margin: 3px 0 0 5px;
*margin:-1px 0 1px 1px;
_vertical-align:middle;
}
input{
*margin:-1px 0 0 1px;
}
input{
height:18px;
margin:0 0 0 4px;
*margin:-1px 0 0 4px;
}
select{
margin:0 0 0 4px;
_margin:0 0 0 2px;
}
* html input.text{
margin:-1px 5px 0 2px;
padding:3px;
width:223px;
height:12px;
border:1px solid #a7a6aa;
background:#FFF url(input-bg.gif) 0 0 no-repeat;
}
* html input.checkbox{
margin:-1px 0 0 -2px;
}
* html input.radio{
margin:-1px 0 0 -2px;
}
* html input.file{
margin:-1px 0 0 1px;
}
</style>
</head>
<body>
<h1>input输入框在浏览器下的统一</h1>
<h2>input type="text"</h2>
<div>
<ul>
<li><label for="text-1">输入框:</label><input type="text" class="text" id="text-1" /></li>
<li><label for="text-2">输入框:</label><input type="text" class="text" id="text-2" /></li>
</ul>
</div>
<h2>input type="checkbox"</h2>
<div>
<ul>
<li><label for="checkbox-1">复选框:</label><input type="checkbox" class="checkbox" id="checkbox-1" /></li>
<li><label for="checkbox-2">复选框:</label><input type="checkbox" class="checkbox" id="checkbox-2" /></li>
</ul>
</div>
<h2>input type="radio"</h2>
<div>
<ul>
<li><label for="radio-1">单选框:</label><input type="radio" class="radio" id="radio-1" name="radio-1" /></li>
<li><label for="radio-2">单选框:</label><input type="radio" class="radio" id="radio-2" name="radio-1" /></li>
</ul>
</div>
<h2>input type="file"</h2>
<div>
<label for="file">提交表单:</label><label for="file">提交表单:</label> <input class="file" type="text" id="file" name="file" style="width:250px;" /><input type="button" value="浏览" /><input class="input_file" size="40" type="file" onchange="txt.value=this.value" style="width:300px; margin-left:-300px; filter:alpha(opacity=0); opacity:0;" />
</div>
<h2>textarea type="file"</h2>
<div>
<label for="textarea">提交表单:</label><textarea name="" class="textarea" id="textarea"></textarea>
</div>
<h2>select</h2>
<div>
<label for="Select">下拉框:</label>
<select name="" id="Select">
<option>asdasd</option>
<option>asdasd</option>
<option>asdasd</option>
<option>asdasd</option>
</select>
</div>
</body>
</html>
页:
[1]