您的位置:首页> 日志> 前端技术 正文
DTOP

利用css隐藏input 文字

slinx | 2011年08月19日 |

>>收藏本文 已有 0条评论

 

  在一个月学习动易政府系统的过程中,碰到了一个苦恼的问题,就是美化功能页面时,如:申请进度查询页。它们默认的input标签value中的文字问题。如何在不修改任何默认文件的情况下清除文字才能让我们更好地美化页面,以下有4种方法。其中第三、第四种兼容性比较好。
<!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 type="text/css">
/*<![CDATA[*/
input {
 margin:5px 0;
 width:200px;
 height:20px;
 display:block;
 overflow:hidden;
 background:#f9f9f9;
 border:1px solid orange;
 }
input.a {
 ie:expression(bb.value="
提交");
 text-indent:-200em;
 }
input.b {
 padding-top:20px;
 }
input.c {
 font-size:100em
 }
input.d { line-height:100px;}
/*]]>*/
</style>
</head>
<body>
<input type="button" value="
提交" id="bb" class="a" />
<input type="button" value="
提交" class="b" />
<input type="button" value="
提交" class="c" />
<input type="button" value="
提交" class="d" />
</body>
</body>
</html>
第一种方法
input.a {
 ie:expression(bb.value="
提交");
 text-indent:-200em;
opera上有问题。(无视opera的直接使用啦。)
第二种方法
input.b {
 padding-top:20px;
}
如果这个值太小了在opera上文字还是可见,所以设置大一些就没问题了,但FF中又会出现把高度撑大的现象;
第三种方法
input.c {
 font-size:100em
}
 这种方法应该说是兼容性最好的
 FF有点bt.padding的时候,IEOPEAR的高度与宽度都不变,就FF变。
第四种方法
input.d {
 line-height:100px;
}
这个兼容性最好。