表单在浏览器下的统一表现

最新推荐文章于 2024-09-29 23:41:25 发布

iteye_14400

最新推荐文章于 2024-09-29 23:41:25 发布

阅读量177

点赞数

分类专栏： jq，前端，css 文章标签：表单对齐 html dtd xhtml 浏览器

本文链接：https://blog.csdn.net/iteye_14400/article/details/82101034

版权

jq，前端，css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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[type="text"]{

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[type="checkbox"]{

margin: 3px 0 0 5px;

*margin:-1px 0 1px 1px;

_vertical-align:middle;

}

input[type="radio"]{

*margin:-1px 0 0 1px;

}

input[type="file"]{

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" οnchange="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>