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

相信很多时候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按钮上的文字，从而让我们做的精美的背景图片呈现在用户面前，提高用户体验，还在等什么，赶快去试试吧，有什么问题，欢迎来咨询我。