CSS小技巧:隐藏input 内的文字的方法

隐藏input的方法在浏览器中各不相同,我们用于网页使用它时并不希望它改变本身内联的属性,现单独分析如下:

首先写一个公用样式:
 

input{
 height:20px;
 width:50px;
}
 

1,IE6,IE7浏览器

方法1
input{
 height:20px;
 width:50px;
  line-height:100em;
}
方法2
input{
 height:20px;
 width:50px;
  padding-top:60px;
}
方法3
input{
 height:20px;
 width:50px;
  line-height:8em;
}
方法4
input{
 height:20px;
 width:50px;
  font-size:80em;
}
方法5
input{
 height:20px;
 width:50px;
  line-height:25em;
}

2.FF浏览器

方法1:
input{
 height:20px;
 width:50px;
  text-indent:-999px;
}

方法2:
input{
 height:20px;
 width:50px;
  font-size:0;
}

3.Opera浏览器
方法1
input{
 height:20px;
 width:50px;
  padding-top:60px;
}
总结:从以上代码看,没有一个全适的样式适合所有浏览器,只能有针对性的加入HACK技术才可兼容各浏览器了!
 

时间: 2024-11-03 13:19:45

CSS小技巧:隐藏input 内的文字的方法的相关文章

CSS网页小技巧:隐藏input 内的文字的方法

css|技巧|网页 隐藏input的方法在浏览器中各不相同,我们用于网页使用它时并不希望它改变本身内联的属性,现单独分析如下: 首先写一个公用样式: input{ height:20px; width:50px;} 1,IE6,IE7浏览器 方法1input{ height:20px; width:50px; line-height:100em;}方法2input{ height:20px; width:50px; padding-top:60px;}方法3input{ height:20px;

优化小技巧 通过站内文章提升网站权重

什么是权重?从数学的角度来讲,为了显示若干量数在总量中所具有的重要程度,分别给予不同的比例系数,这就是加权.加权的指派系数就是权数,又称权重.权值.引用到网站的衡量上,就是搜索引擎判断一个网站是否权威的一个标准,最先有权重的说法还是谷歌提出,也就是人们熟知的PR!而国内的百度并无BR一说,都是站长们自己定义的,但大部分站长工具都提供了百度权重的查询,可见权重这个概念在每个站长心中占有很大比重! 百度衡量一个网站的权威度用什么体现,百度官方并没有声明,但从站长们的经验来看,站长工具给出的百度权重的

CSS实例教程:使用CSS3实现实现文字渐变方法

文章简介:我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片.今天我们将介绍两种使用CSS3实现实现文字的方法. 之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片.今天我们将介绍两种使用CSS3实现实现文字的方法.嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 1.-webkit-mask 在<CSS的未来:一些试验性CSS属性>中,我们提到了这个属性,相对于Firefo

不可不知的CSS小技巧

一.表单部分 1.禁止textarea文本域的缩放  resize:none; 2.去除初始化textarea下拉条 overflow:auto; 3.如何让表单中的选项按钮,点击文字也能选中? <lable><input type="radio" name="sex" value="女" checked="checked"/>女</lable> 4.如何让文本垂直对齐文本输入框 input

CSS小技巧

css|技巧 经常有朋友问:如何使有超级连接的文字不出现下划线,如何使鼠标移动到超连上产生变色的效果?其实这些通过传统的方法是办不到的.而使用CSS的控制却可以非常轻松地作到,而且,页面的代码也不会臃肿. ★★先看看超连没有下划线的例子: 例子1: 这个连接可以去页面底部,但是没有下划线. 是如何作到这一点的呢?在<head>和</head>之间加上如下的CSS语法控制: <style type="text/css"> <!-- a:link 

CSS网页技巧:实现超级链接文字上划线和下划线

css|技巧|链接|网页 链接文字的上划线.下划线.删除线(贯穿线).闪烁等可以通过CSS的text-decoration属性来实现.其属性值与效果相对应的关系如下: text-decoration: none : 无装饰blink : 闪烁underline : 下划线line-through : 删除线(贯穿线)overline : 上划线 学习了此属性的一些用法,我们不难看出,链接文字上划线.下划线同时出现可以通过:text-decoration: underline overline,即

学习CSS小技巧:优化你的CSS代码

css|技巧|优化 最近看过许多网友制作的SKIN的CSS文件,发现其中有着许多冗余的代码.下面我来跟大家介绍一下,如何清除这些冗余的代码,让你的CSS文件更加简洁. 一.margin.padding属性 参照相关资料我们可以知道,margin和padding代表的意思分别是外部边距和内部填充距离,在许多网友的CSS中,关于这两个属性的冗余代码是出现得最多的.比如:margin:0px,大家可以查看一下自己的CSS文件中,是否许多的margin:0px,其中有的是不需要的,你可以尝试删除它,当然

三个很特别的CSS小技巧分享

  各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新.最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网.这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁,更好维护的浏览器前端代码.现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能. 1.在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行.它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了

CSS小技巧:巧用CSS实现左右分离的滚动条

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 最近自己在一个表情网(www.40607.cn),参考了其他的一些表情网,发现很多表情网都才具的左右分离的 滚动条的模式,左边是列表.右边是某一类的具体表情展示页,打开这样的页面,我自己还是比较这样的格局的,这样的用户体验做的简单明了,方便用户来查询,用户体验还是蛮不错的,不象别的网站做的很不方便查询,任何网站都一样,著名导航好123不就是简