CODEWITHSUNDEEP
htmlcss
Drexel
Drexel

Reputation: 67

HTML 'select' element cannot be resized using CSS's height

I wonder why CSS' height can't resize a 'select' element in HTML.

<select>
    <option>One</option>
    <option>Two</option>
</select>

and CSS:

select {
    height: 40px;
}

Thanks in advance!

Upvotes: 3

Views: 1922

Answers (3)

Allocen
Allocen

Reputation: 79

http://jsfiddle.net/qd2mvgk8/

<select>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>  
</select>

select {
    height: 50px;
    border:1px solid #acacac;
    width:250px;
    line-height: 50px;
    color:#df781b;
    font-size:15px;
}

try this one, I did add some styling to it just so it might help you out.

Upvotes: 1

amit kate
amit kate

Reputation: 120

if any css overriding this class then use following class

select {
    height: 40px !important;
    line-height: 40px;
    border: 1px solid #ccc;
    width: 200px;
}

Upvotes: 1

KiV
KiV

Reputation: 2263

You should use line-height along with. Below fiddle shows you the same.

http://jsfiddle.net/pckh7spw/

select {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ccc;
    width: 200px;
}

Upvotes: 4

Related Questions