将文本值更改为按钮

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
}

需要注意的是，表单和选择器确实不喜欢样式，即使是边框也会在某些浏览器中导致奇怪的显示。 “选择”特别敏感。所以你可以试试 text-indent，A Mohorev 的回答也提出了一个有趣的想法，你可以将背景颜色和文本颜色设置为相同的值。或者某些浏览器甚至尊重“透明”的文本颜色。 另一个需要注意的是，移动平台越来越多地使用自己的 UI 来处理表单和字段集，因此对于这些情况，您真的无能为力。

Answer 2

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

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