Hide the text of a select

Question

Hide the text of a select

Navigation

#1 by (0 votes)

1

I have a select with a small image and a text in each option. I want to hide the text when I open the select and when I select the option selected appears. Something like this:

document.getElementById('select_lng').onchange = function() {
    window.location = "page.htm?lng="+this.value;

    document.getElementById('fr').style.visibility = 'hidden';
};

   <select name=lng id=select_lng>\n"
     <option id=fr title=FR  value=fr style=\"background-image:url(/logos/fr.png) >FR</option>
     <option id=en title=EN value=en style=\"background-image:url(/logos/en.png) >EN</option>"
  </select>

javascript

asked by anonymous 17.07.2015 / 18:22

1 answer

What are all the keyboard type and native Inputs that exists on iPad iOS 8? How can I make a permission window just like facebook! [closed]

score 0 · Answer 1

"I want to hide the text when I open the select"

Why do not you leave it by default "hidden"? with this css it is possible to make it invisible to the eyes because the text would be the same background color:

select option { color: #fff }

"When selected, the option selected appears"

Automatically, when you select it, it is left with the blue background, so the white text on the blue background will appear, so it would not need any code to do that.

Example:

select {
    height: 50px;
    width: 150px;
}
select option {
    color: #fff;
}

   <select name=lng id=select_lng>\n"
     <option id=fr title=FR  value=fr style="background:url(http://gartic.com.br/imgs/mural/ma/maquitinho/bandeira-da-franca.png) no-repeat transparent scroll center center / contain" >FR</option>
       <option id=en title=EN  value=en style="background:url(http://www.webbusca.com.br/atlas/bandeiras/eua.gif) no-repeat transparent scroll center center / contain" >EN</option>
  </select>

Observations

I set the selected height and width of the select for better visualization, and I also changed the link of images to images on the web for better visualization, and also added modifiers to the background attribute such as contain and scroll center center to center the image and restrict the image to the size of the option, also, for better visualization.