Javascript 选择“标记为不可见”选项

我希望我的选择标记完全不可见，但仍然可以单击，因为我有一个表示可单击区域的彩色div，单击后，将显示选择选项。我已经将其设置为不可见，除了单击select标记之前显示的初始文本。我只需要让文字隐形。以下是我的代码：

彩色div的css：

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

html:

这是一个

我只需要紫色div中的黑色文本消失。谢谢

差不多了：

color: transparent;

添加一个空选项

<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>

js

---

A会很方便，这样我们就可以自己调整它并玩它了。@GregL这是一个非常好的主意，我知道你要怎么做了+1.你能换成不透明度吗？（）这样，对象仍然存在，但其不透明度设置为0，因此您无法看到它？这会使所有选项的文本不可见。您还可以执行不透明度：0；你不能吗？我需要紫色分区中的黑色文本永远不显示。在这个例子中，当他们选择一个选项时，它会显示出来。也许我想要的是一个select标签。谢谢。一旦选择了一个选项，中间的文本就会变成黑色。对你来说不是黑色的吗？我正在使用Chrome测试JSFIDLE。谢谢我不明白你写了什么我需要紫色的div永远不要有任何文字。谢谢

<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>

<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>

#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;
}

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