將文本值更改爲按鈕

-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

將文本值更改爲按鈕

回答

相關問題