버튼으로 텍스트 값 변경

Question

나는 각 국가의 플래그 아이콘이있는 국가의 목록을 표시하는 옵션을 가지고 있으며 플래그 아이콘을 얻기 위해 CSS를 사용합니다. 같은
이 사람이 목록에서 값을 선택하고 I 버튼의 텍스트뿐만 아니라 플래그 아이콘을 표시 할 변경하고 버튼의 아이콘 값 텍스트를 표시하지만 것

<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에서 숨기기 텍스트

Answer 1

팁 솔루션 :

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

Answer 2

오른쪽, 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를 점점 더 많이 사용하고 있다는 것입니다. 따라서 이러한 경우에는 실제로 할 수있는 일이 없습니다.