将文本值更改为按钮

-1

我有选择选项显示每个国家的标志图标的国家列表，我使用CSS来获取标志图标。
这样将文本值更改为按钮

<form name="form" id="form"> 
    <table width="200" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td wide="20"> 
       <select class="custom" name="countriesFlag"> 
        <option class="usa">USA</option> 
        <option class="italy">Italy</option> 
        <option class="france">France</option> 
        <option class="germany">Germany</option> 
       </select> 
      </td> 
</form>

当人从列表中选择值，它会改变，并显示在按钮图标价值的文字，但我只想显示标志图标按钮没有文字，我怎么能用jquery或css编写代码，不要显示文本，而只显示图标！在CSS的隐藏文字

来源

2014-01-22 user3220804

对不起，但你在说什么按钮？ – Yoann

你有哪个部分有问题？读取所选'选项'的'class'？或者将该类添加到按钮？另外，你的选择没有任何具体的价值... – feeela

-2

提示解决方案：

.theClassOfTagWhereHiddenText { 
    text-indent: -9999px; 
}

来源

2014-01-22 23:18:33 jmercier

WTF？那甚至与这个问题有关呢？一种描述在这里会有所帮助。 – feeela

许多年的编码...闻到CSS newbee – jmercier

这个问题不是像“如何隐藏图标后面的文本”这样的CSS问题，而是一个关于如何将所选值传递给按钮的JS问题...... – feeela

右键，jmercier是给一个非常简短的答案，但已经不远了。显示背景图形（而不是元素中的文本）的一种（主要）标准方式是在css中设置背景，并为该对象提供负面文本缩进，基本上将文本拉出视图（但将其留在HTML屏幕阅读器等）。例如。 HTML

<div id="usa">USA</div>

CSS

#usa{ 
    background-image('usa-flag.jpg'); 
    background-repeat:no-repeat; 
    overflow:hidden; 
    height:20px; 
    width:20px; 
    text-indent:-9999px 
}

需要说明的是，形式和选择真的不喜欢的风格，即使是边界会造成奇怪的显示在某些浏览器。 “选择”特别敏感。所以你可以尝试文字缩进，Mohorev的答案也提出了一个有趣的想法，你可以将背景颜色和文本颜色设置为相同的值。或者一些浏览器甚至尊重“透明”的文字颜色。另一个需要注意的事情是，移动平台越来越多地使用自己的用户界面来显示表单和字段集，因此对于这些情况，您确实没有什么可以做的。

来源

2014-01-23 00:12:08 user2631523

将文本值更改为按钮

回答

相关问题