欢迎光临
我们一直在努力

CSS | 三种方法去除input按钮上的文字

文章目录

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

<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按钮上的文字,从而让我们做的精美的背景图片呈现在用户面前。

赞(1) 打赏
未经允许不得转载:散人研 » CSS | 三种方法去除input按钮上的文字
分享到: 更多 (0)

评论 抢沙发

1 + 8 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏