CODEWITHSUNDEEP
jqueryhtmlcss
EnexoOnoma
EnexoOnoma

Reputation: 8836

How to show the selected option from dropdown with a big font size, while the other options stay regular size?

I am trying to create a:

Can I ___dropdown___ with this tool?

having the "Can I", "with this tool?" and the selected dropdown option to be big font size.

However, if I do this, let's say 40px, the available options are 40 px too and it looks ugly.

Here is my code:

select {
  padding: 20px;
  background-color: white;
  border: 0;
  border-bottom: 1px solid #ccc;
  font-size: 35px;
}

span {
  display: inline-block;
  padding: 10px;
}

.mytext {
  font-size: 42px;
  font-weight: bold;
}
<span class="mytext">
Can I
</span>
<span>
    <select >
        <option></option>
        <option>this is my first option</option>
        <option>this is my second option</option>
        <option>this is my third option</option>
        <option>this is my fourth option</option>
    </select>
</span>
<span class="mytext">with your tool?</span>

My question is how to edit my code, so that the selected option is big, but the others remain 22px font size?

Upvotes: 1

Views: 41

Answers (1)

Arthur
Arthur

Reputation: 5148

You can do it with :checked pseudo class, similar to checkbox tags

select {
  padding: 20px;
  background-color: white;
  border: 0;
  border-bottom: 1px solid #ccc;
  font-size: 35px;
}
/* Just add this */
option:not(:checked) {
  font-size: 22px;
}


span {
  display: inline-block;
  padding: 10px;
}

.mytext {
  font-size: 42px;
  font-weight: bold;
}
<span class="mytext">
Can I
</span>
<span>
    <select >
        <option></option>
        <option>this is my first option</option>
        <option>this is my second option</option>
        <option>this is my third option</option>
        <option>this is my fourth option</option>
    </select>
</span>
<span class="mytext">with your tool?</span>

Upvotes: 3

Related Questions