0

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>
enter image description here
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
user17218112
  • 1
  • Why do you need the label in this case? – MrDeibl Oct 22 '21 at 09:03
  • 1
    Could be similar to select options? [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) – Peter Krebs Oct 22 '21 at 09:15
  • @MrDeibl it's used in autocomplete. You'd want to hide the label if, for example, you stuff it with synonyms. – thdoan Jul 06 '22 at 01:35

3 Answers3

0

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>
MrDeibl
  • 157
  • 1
  • 10
  • I mean, I want to use the label in the backend but not show it to the user. – user17218112 Oct 22 '21 at 09:09
  • then maybe this answer helps you https://stackoverflow.com/q/29882361/8823887 – MrDeibl Oct 22 '21 at 09:13
  • 2
    You mean your backend does not know which value has which label? You should not rely on the label - it can be easily changed using the browser's developer tools if someone wants to abuse your system. – Peter Krebs Oct 22 '21 at 09:17
0

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

Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
0

You could just set the divider element as hidden.

<div class="container text-center" hidden>
JohnAlexINL
  • 615
  • 7
  • 15