利用css去除input按钮上的文字的几种方法


前端

零度逍遥

2014-05-02 17:15:25

      相信很多时候input上的文字困扰着web前端开发者,必须要通过修改html代码中的value值才能清空按钮上的文字,但很多人不愿意去动html代码,一方面麻烦,另外主要的原因还在于保留文字对seo有好处,对搜索引擎有力的东西当然能保留就保留。

今天零度就来告诉大家利用css去除掉input按钮上的文字的几种方法,先看一个例子:

<input type="button" style="background:red; width:120px; height:50px;" value="中文" /> 
为了简单的演示,我把一些属性给去掉了,这是一个红色的button,上面有中文两个字,现在我要加一些css属性,把中文两个字隐藏掉。

第一个属性:text-indent

<input type="button" style="background:red; width:120px; height:50px;text-indent:-9999px" value="中文" />

 

这个属性相信很多人都用过,很实用,是不改变html代码而让文字隐藏常用的方法,只是-9999这个数字不一定非要这么大,稍微大点,超出按钮的长度即可,当然,最好还加上overflow:hidden。

 

第二个属性:padding-top

<input type="button" style="background:red; width:120px; height:50px;padding-top:100px" value="中文" />

 

padding-top的值大小可以根据情况而定,只要超过按钮的高度即可,同上,最好加上overflow属性。

 

第三个属性:line-height

<input type="button" style="background:red; width:120px; height:50px;line-height:200px" value="中文" />

通过行高也可以使按钮上的文字隐藏,line-heigt的值要大于按钮高度的二倍,尽量设的大一点,加上overflow。

通过以上三个属性都可以很轻松的隐藏掉input按钮上的文字,从而让我们做的精美的背景图片呈现在用户面前,提高用户体验,还在等什么,赶快去试试吧,有什么问题,欢迎来咨询我。