CODEWITHSUNDEEP
htmlxhtml
Elitmiar
Elitmiar

Reputation: 36829

How do I adjust the width of a DropDown <select> box?

I need to adjust the width of a select HTML box without using css, is there a way? I tried size but then it's adjusting the height, and width does nothing? Is there another way?

Upvotes: 9

Views: 112239

Answers (6)

ceoDemitri
ceoDemitri

Reputation: 1

Change the font-size

<select name="ships" id="ship-select" class="ships" style="font-size: 2rem;">

Upvotes: 0

Navya Mounika Pala
Navya Mounika Pala

Reputation: 1

select
{
    width:  100%;
    height: 42px;
}

Add this class to your style tag. It works fine.

Upvotes: -2

Karthik Sivakumar
Karthik Sivakumar

Reputation: 106

If u using jquery, Maths Physics Chemistry

This is my select html code. So u have to add another div which contains jquery class name including your class name and apply height and width in your class.

<div class="ui-select selBox"> 
    <select>
    <option>Maths</option>
    <option>Physics</option>
    <option>Chemistry</option>
    </select>
</div>
.selBox{
 width: 470px !important;
 height: 40px !important;
}

here selBox is my class name and ui-select is jquery class name.

Upvotes: 0

brettkelly
brettkelly

Reputation: 28205

<style type="text/css">     
    select {
        width:200px;
    }
</style>

Does that not work?

Upvotes: 12

jao
jao

Reputation: 18610

Add an empty option with enough spaces in it ...

Upvotes: 1

stimms
stimms

Reputation: 44046

There is no way to do it in pure HTML as per http://www.w3.org/TR/html401/interact/forms.html#h-17.6. You can set it using the style element, though which is kind of without css in that it is inline.

<select style="width: ....

Upvotes: 17

Related Questions