João Guerreiro João Guerreiro - 3 months ago 27
CSS Question

Custom NumberPicker - optimization

I have this NUMBERPICKER.
But I don't want the numbers in the box to show up in the section_room until selected one. Until that I want to have a backgroudImage (placeholder).

<div class="section_room">
<select id="persons" type="text" placeholder="" onchange="hideIcon(this);">
<option value="null">1</option>
<option value="null">2</option>
<option value="null">3</option>
<option value="null">4</option>
</select>
</div>

<script>
function hideIcon(self) {
self.style.backgroundImage = 'none';
}
</script>






#persons {
background-image: url(../images/icn_person1_dark.png);
background-size: 40% 80%;
background-repeat: no-repeat;
background-position: center;
}
select {
float:right;
width: 20%;
height: 44px;
color: #858585;
font-size: 0.8725em;
outline: none;
font-family: 'Open Sans', sans-serif;
background: #ffffff;
border-color:darkgrey;
border-style: solid;
border-radius: 2px;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
}
select option {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

Answer

Try this:

<option disabled selected value></option>

Which will provide a 'blank' selection until someone chooses one of the available numbers.

EDIT: Nevermind. Image in a select option is an awful idea.

View here: Updated JS Fiddle Example

Your full <select> would look like this:

<select id="persons" type="text" placeholder="" onchange="hideIcon(this);">
  <option disabled selected value></option>
  <option value="null">1</option>
  <option value="null">2</option>         
  <option value="null">3</option>
  <option value="null">4</option>
</select>

The Select2 plugin's template feature can handle this: Select2