Question

我选择了显示每个国家/地区标志图标的国家/地区列表，并使用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中编写该代码不显示文字而只显示图标！

Answer 1

是的，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的答案也会带来一个有趣的想法，您可以将背景颜色和文本颜色设置为相同的值。或者某些浏览器甚至尊重“透明”的文本颜色。另一个需要注意的是，移动平台越来越多地使用自己的UI来构建表单和字段集，因此对于这些情况，实际上没有任何东西可以做。

Answer 2

在css中隐藏文本的提示解决方案：

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

将文本值更改为按钮

2 个答案: