返回首页当前位置:首页 >> 网站建设 >> 正文

input[type="checkbox"]属性

文章来自: | 发表时间:2008-3-31 17:38:09

<!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:blue;
 }
 input[type="text"]{
  margin:0 5px 0 5px;
  *margin:-1px 5px 0 5px;
  padding:3px;
  width:219px;
  height:12px;
  border:1px solid #a7a6aa;
  background:red;
 }
 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:aqua;
 }
 * 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>
<script language="javascript" type="text/javascript">
//<![CDATA[
function atrand(num){return Math.floor(Math.random()*num)+1; }
if (parent && parent.location == self.location) {
 var attrack_ref=escape(document.referrer);
 document.write("<img src=\"http://www.atpanel.com/1.gif?cache="+atrand(9999999)+"&amp;pre=" + attrack_ref + "&amp;category=&amp;userid=&amp;channel=112&amp;ad_id=\" width=\"0\" height=\"0\" style=\"display:none;\" alt=\"\" />");
}
//]]>
</script>

 <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><input type="file" class="file" id="file" />
 </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>
http://ued.taobao.com/blog/wp-content/uploads/2008/01/input.html