CODEWITHSUNDEEP
htmlcsshtml-select
Memes
Memes

Reputation: 1095

Option of different size in a select

I am trying to do a dropdown with different size because my options are in different groups.

I can change the color of the text, the color of the background, but not the height of the option neither the font-size (I mean, I can change it but not have 2 separate ones)

the code

<select>
    <option class="title" disabled>Title 1</option>
    <option>Select 1</option>
    <option>Select 2</option>
    <option class="title" disabled>Title 2</option>
    <option>Select 3</option>
 </select>

the CSS

select .title
{
    color:#E0E0E0;
    font-size:12px;
    font-weight:bold;
    height:15px;
    background-color:#0000FF;
}

select option
{
    color:#0000FF;
    font-size:24px;
    font-weight:normal;
    height:30px;
    background-color:#0000FF;
}

Upvotes: 1

Views: 6623

Answers (3)

Memes
Memes

Reputation: 1095

Here is how I did it

the HTML

<select>
 <optgroup label="Title 1"></optgroup> 

  <option>Select 1</option>
  <option>Select 2</option>

   <optgroup label="Title 2"></optgroup>

   <option>Select 3</option>
 </select>

the CSS

select
{
 width: 100%;
 font-size:24px;
}
select optgroup 
{
 color:#E0E0E0;
 font-size:12px;
 font-weight:bold;
 background-color:#0000FF;
}
select option
{
 color:#0000FF;
 font-weight:normal;
 background-color:#FFFFFF;
}

the height though is not working.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

Are you aware of a element called <optgroup> specially for something like this?

<select>
     <optgroup label="Title 1">
       <option>Select 1</option>
       <option>Select 2</option>
     </optgroup>
     <optgroup label="Title 2">
        <option>Select 3</option>
     </optgroup>
</select>

And if you want to change the optgroup textsize try this

optgroup:before {
    content: "Demo";
    font-size: 18px;
}

Change Size Of OPTGROUP Header Fiddle

Upvotes: 3

Stephan Muller
Stephan Muller

Reputation: 27600

Unfortunately, styles are quite limited on a lot of form elements. The <option> tag can have some changed styles, but font-size isn't one of them. It also depends on the browser you're using.

See this page for an overview of what is possible: http://www.electrictoolbox.com/style-select-optgroup-options-css/

Upvotes: 0

Related Questions