CODEWITHSUNDEEP
htmlcss
Babu
Babu

Reputation: 49

Reducing the font size of the drop down in HTML

I have dropdown in my HTML Page which has width more than 250px.

I need to change the dropdown font size so that the width gets reduced.

I tried using the font tag like below:

<font size='6'>
    <select>
    <option></option>
    .
    .
    .
    </select>
</font>

The above code didn't work.

When I tried reducing the width by hardcoding the value as width='50' it hides the full text of all the dropdown which becomes hard to select an particular option.

Suggest a solution so that width gets reduced and all the options visible in the dropdown.

Note: it should be compatible in IE8

Upvotes: 2

Views: 394

Answers (5)

sanoj lawrence
sanoj lawrence

Reputation: 993

try this simple method external style sheet method

select{font-size:6px;}
<select>
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
</select>

Inline style sheet method 

<select style="font-size:6px">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
    </select>

Upvotes: 0

nicael
nicael

Reputation: 18997

To change the font size, just apply font-size:XXpx; css property:

<select style="font-size:6px;">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
</select>

Or, if you want to put it in your stylesheet:

select{
  font-size:6px;
}
<select>
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
</select>

Upvotes: 3

Freijlord
Freijlord

Reputation: 96

You can use CSS for that.

Example: https://jsfiddle.net/9ddaexpz/

HTML:

<select id="myDropdown">
    <option>foo</option>
    <option>bar</option>
</select>

CSS:

#myDropdown
{
    font-size: 6px;
}

Upvotes: 1

Waqas Khan
Waqas Khan

Reputation: 257

In select tag use the css style given below. 

<select style="font-size:6px">
    <option></option>
    .
    .
    .
    </select>

Upvotes: -1

pbaldauf
pbaldauf

Reputation: 1681

Use CSS font-size Rule on your select-element

<select style="font-size: 6px">
    <option>ABC</option>
    <option>ABC</option>
    <option>ABC</option>
    <option>ABC</option>
</select>

Here's a Fiddle

Upvotes: 1

Related Questions