Pergunta

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!

Foi útil?

Solução 2

Tips solution for hide text in css :

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

Outras dicas

Right, jmercier is giving a really abbreviated answer, but isn't far off. A (mostly) standard way of showing a background graphic, but not the text in an element is to set the background in css, and give that object a negative text indent, essentially pulling the text out of view (but leaving it in the html for screen readers and such). E.g. 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
}

The caveat is that forms and selectors really don't like styles, even a border will cause strange display in some browsers. "Select" is especially touchy. So you can try text-indent, A Mohorev's answer brings up an interesting idea too, you could set the background color and the text color to be the same value. Or some browsers even respect a text color of 'transparent.' Another caveat is that mobile platforms more and more are using there own UI for forms and fieldsets, so for those cases, there really isn't anything you can do.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top