Search code examples
jqueryhtml-selectselected

Change text value to button


I have select option show list of countries with flags icons of each countries, and I use css to get flag icons.
like this

<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>

when person selected value from the list and it will change and show the value text with icon in the button, but I want to show only flag icon not text in the button, how can I write that code in jquery or css that not to show text but only icon!


Solution

  • Tips solution for hide text in css :

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