CODEWITHSUNDEEP
javascripthtmlselect
user4119132
user4119132

Reputation: 31

select tag with invisible option

I want my select tag to be completely invisible, but still clickable, because I have a colored div representing the area that is clickable, and once clicked, the select options will be displayed. I have got it to the point where it is invisible, except for the initial text that shows before you click the select tag. I just need make that text invisible. Here is the code I have:

css of the coloured div:

.residentPanel {
    text-align: center;
    line-height: 100px;
    border: 1px solid #666;
    background-color:#65A3EB;
    width:100%;
    height:100px;
    margin-bottom:20px;
}

html:

<div class="residentPanel" style="background-color:#C991BE;" onclick="showSingleMeasurement()">
                <select style="left:0; width:100%;height:100px;background-color:transparent; -webkit-appearance: none;" id="allMeasurementsDropDownTablet" onclick="selectClick($('#allMeasurementsDropDownTablet'), measurementClick);"></select>
                </div>

Here is a JsFiddle

I just need the black text in the purple div to disappear. Thanks.

Upvotes: 2

Views: 302

Answers (2)

alessandrio
alessandrio

Reputation: 4370

add an empty option

<div class="residentPanel" style="background-color:#C991BE;" onclick="showSingleMeasurement()">
    <select style="left:0; width:100%;height:100px;background-color:transparent; -webkit-appearance:none;outline:none;" id="allMeasurementsDropDownTablet" onclick="selectClick($('#allMeasurementsDropDownTablet'), measurementClick);" value="">
         <option disabled selected style="display:none;"></option>
         <option>Durr</option>
         <option>jgbfj</option>
         <option>zzzzzz</option>
         <option>aaaaaa</option>
         <option>yyyyyy</option>
     </select>
</div>

other

<div id="content">
    <div id="centered"></div>
      <select id="selectToCenter" onmousedown="this.value='';">
         <option value="1">Durr</option>
         <option value="2">jgbfj</option>
         <option value="3">zzzzzz</option>
         <option value="4">aaaaaa</option>
         <option value="5">yyyyyy</option>
       </select>
</div>

css

#content{
    position:relative;
    background-color:#C991BE;
    height:100px;
    width:100%;
    z-index:1;
}
#centered{
  position:absolute;
  text-align: center;
  font: bold 18pt calibri;
  line-height:100px;
  background:red;
  width:100%;
  height:100%;
  z-index:-1;
}
#selectToCenter{
  height:100px;
  background-color:transparent;
  -webkit-appearance:none;
  outline:none;
  width: 100%;
  font: bold 18pt calibri;
  text-indent: 5px; 
  color:transparent !important;
}
option{
  color:black !important;
}

js

$('#selectToCenter').on('change', function () {
    $('#centered').text($(this).find('option:selected').text());
});

JSFIDDLE

Upvotes: 2

yowainwright
yowainwright

Reputation: 105

almost there:

color: transparent;

Upvotes: 0

Related Questions