Put a label from your dropdown menu.

So... How to put a label from a dropdown menu? So, You used a different element wrapped from your dropdown menu (<select>) tag. And you put these tags.

<p>

<hr>

And guess what? Doesn't work! You might be frustrated, But here is the real thing, You are in the right place! You are doing it wrong! Use <optgroup> instead?

But you are gonna ask me these questions from this article.

What does <optgroup> stand for? How can i put my label from <optgroup>? Can i still customize my dropdown menu especially my label for the dropdown menu? Well, Let's start with question 1, "What does <optgroup> stand for?".

Now what it stands for is this below.

<opt group>

option group (label, sort)

opt - option

group (label or sort)

Label is what we're doing right now.

Now, Question 2, "How can i put my label from <optgroup>?". Good Question! We will do that from the end!

Also question 3, "Can i still customize my dropdown menu especially my label for the dropdown menu?". Answer's Yes, But the label text color from the <select> tag will turn white when you set it to a custom color, also black too. And the label text color will turn black when there's NO background from the dropdown menu.

Now, Back to question 2, There will be NO CSS from the label from our dropdown menu. 100% legit! There will be CSS if you want to Customize it.

Question 2's answer is this, Put the label attribute from the <optgroup> tag, Like this for example.

<optgroup label="Your label's name here."></optgroup>

And of course you can put Emojis, Brackets [] curly brackets {} or these whatever they're called (), Also these too! <> But don't forget.

< >

&lt; &gt;

Now you want me to ask me this EXTRA question that you want from me. How am i gonna put my options from my label? Easy, Just wrap it with the <optgroup> tag, Make sure it's option tag to be your label!!!, Like this:

<optgroup label="Your label's name here.">

<option>Your options are supposed to be here if you want your options to be in your label!!!</option>

</optgroup>

Now let's see the Preview, So this is my Code:

<select>

<optgroup label="Your label's name here.">

<option>Your options are supposed to be here if you want your options to be in your label!!!</option>

</optgroup>

<optgroup label="Truth">

<option>This option is wrapped from a <optgroup> tag to put the label here</option>

</optgroup>

<option>This option doesn't have a label on it.</option>

</select>

My Preview from a HTML website page!:

That's all for today!