CODEWITHSUNDEEP
htmlcss
Abishek
Abishek

Reputation: 67

how to change height to drop down box in html?

The problem is I can't change the height of the drop down box in html.for (select->option) I try to apply the style in CSS. It does not works

Upvotes: 0

Views: 37821

Answers (5)

loder
loder

Reputation: 1

You can style the select and option elements usign CSS like this:

select { height: 200px; color: red; }

option { color: green; }

Notice that you have to remove the "." before select and option. This will overwrite any select and option element.

EDIT:

You can also refer to a certain select element by giving to that element a class name, like this:

select.s1{ height: 100px; }

select.s2{ height: 150px; }

<select class="s1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

<select class="s2">
    <option value="fiat">Fiat</option>
    <option value="ferrari">Ferrari</option>
    <option value="alfaromeo>Alfa Romeo</option>
    <option value="lancia">Lancia</option>
</select>

Upvotes: -2

user9880948
user9880948

Reputation: 

<select style="min-height:40px;min-width:100px;">
     <option value="">Select1</option>
     <option value="">Select2</option>
     <option value="">Select3</option>
</select>

Upvotes: -1

לבני מלכה
לבני מלכה

Reputation: 16251

You can not control the style of option. (see here:https://css-tricks.com/dropdown-default-styling/)

however you can change the font-size and the option will grow

select option{
  font-size: 20px;
}
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Upvotes: 5

S&#233;bastien Le Marchand
S&#233;bastien Le Marchand

Reputation: 178

You just need to use the height CSS attribute for the select tag.

label select {
  height: 100px;
}
<label>
    <select>
        <option selected>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
</label>

Upvotes: 0

charan kumar
charan kumar

Reputation: 2157

It is not possible to change height of 'option'

Only you can change the background-color and color of the 'option' values

You can change the 'select' element height.

Upvotes: 0

Related Questions