How to hide label in datalist HTML?

<div class="container text-center">
          <div>
            <input class="form-control w-25 mx-auto rounded-pill" list="lst" placeholder="type" id="selectStation">
            <datalist id="lst" class="data">
              
              <option label="W1" value="a">
              <option label="S1" value="b">
              <option label="S2" value="c">
    
            </datalist>
          </div>
        </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe> enter image description here

CodePudding user response：

Just dont set it.

<div class="container text-center">
          <div>
            <input class="form-control w-25 mx-auto rounded-pill" list="lst" placeholder="type" id="selectStation">
            <datalist id="lst" class="data">
              
              <option value="a">
              <option value="b">
              <option value="c">
    
            </datalist>
          </div>
        </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Like the HTML Select element, the Datalist has very little flexibility in its design. Browsers define their own styles for these elements.