How to change the size of a drop-down menu

Cliff R. · Dec 3, 2003

Hi, I'm a bit stumped on this one, how can I change the size of a
drop-down menu? Either making the text smaller or the whole box
smaller? I've tried making the font size smaller using the option tag
in the stylesheet but it's not working. Sample code below... Thank
you!

<select name="menu">
<option value="index.htm" size=1 SELECTED>Choose an Item</option>
<option value="1.htm">item 1</option>
<option value="2.htm">item 2</option></select>

Disco Octopus · Dec 3, 2003

Cliff said:
Hi, I'm a bit stumped on this one, how can I change the size of a
drop-down menu? Either making the text smaller or the whole box
smaller? I've tried making the font size smaller using the option tag
in the stylesheet but it's not working. Sample code below... Thank
you!

<select name="menu">
<option value="index.htm" size=1 SELECTED>Choose an Item</option>
<option value="1.htm">item 1</option>
<option value="2.htm">item 2</option></select>

this does not work.....
<style type="text/css">
#name {
width: 250;}
</style>

but this does work....

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

Guest · Dec 3, 2003

Cliff R. said:
Hi, I'm a bit stumped on this one, how can I change the size of a
drop-down menu? Either making the text smaller or the whole box
smaller? I've tried making the font size smaller using the option tag
in the stylesheet but it's not working. Sample code below... Thank
you!

<select name="menu">
<option value="index.htm" size=1 SELECTED>Choose an Item</option>
<option value="1.htm">item 1</option>
<option value="2.htm">item 2</option></select>

Style Sheets

Louis Somers · Dec 4, 2003

Hi, I'm a bit stumped on this one, how can I change the size of a
drop-down menu? Either making the text smaller or the whole box
smaller? I've tried making the font size smaller using the option tag
in the stylesheet but it's not working. Sample code below... Thank
you!

<html><head>
<title>FullScreen</title>
<style type="text/css">
select {height: 12; width: 100; max-height: 12}
</style>
</head>
<body>
<form method="post" action="hummm.bee">
<select name="menu">
<option value="index.htm" SELECTED>Choose an Item</option>
<option value="1.htm">item 1</option>
<option value="2.htm">item 2</option></select>
</form>
</body></html>

Works in Opra, only Height doesn't seem to work in IE, at lease Width does.

Toby A Inkster · Dec 4, 2003

Disco said:
this does not work.....
<style type="text/css">
#name {
width: 250;}
</style>

Of course it doesn't. "#name" selects the element with ID "name", when you
want to select the element with name "menu".

select[name="menu"] might be better, but that's not supported in IE.

Also, you missed the unit from your width. 250 hobnobs won't fit on most
screens.

Mark Parnell · Dec 4, 2003

Sometime around Wed, 03 Dec 2003 23:51:40 GMT, Disco Octopus is reported to
have stated:

but this does work....

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

That depends on your definition of "work". 250 what? 250 bunyips?

http://www.w3.org/TR/REC-CSS2/syndata.html#length-units

brucie · Dec 4, 2003

select {height: 12; width: 100; max-height: 12}

toby is going to run out of hobnobs at this rate

Cliff R. · Dec 4, 2003

Sometime around Wed, 03 Dec 2003 23:51:40 GMT, Disco Octopus is reported to
have stated:

That depends on your definition of "work". 250 what? 250 bunyips?

http://www.w3.org/TR/REC-CSS2/syndata.html#length-units

Thank you -- that does work to change the size of the menu box. What
about reducing the size of the text within the box? I've tried select
{font-size:80%;} and option {font-size:80%;} without luck. (Using IE
6) Anyone? Thank you!

rf · Dec 4, 2003

Cliff R. said:
Thank you -- that does work to change the size of the menu box. What
about reducing the size of the text within the box? I've tried select
{font-size:80%;} and option {font-size:80%;} without luck. (Using IE
6) Anyone? Thank you!

Why would you want to make the text 80% of the size I have set as my
default? I would just up my default to put it back where I like it.

Cheers
Richard.

Louis Somers · Dec 4, 2003

toby is going to run out of hobnobs at this rate

Ok, correction:

<style type="text/css">
select {height: 12px; width: 100px; max-height: 12px}
</style>

Not sure why drop-down is not working.	2	Mar 24, 2024
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Dependent Drop Downs	1	Nov 4, 2023
Multi select options in a menu	1	Oct 30, 2022
Drop down menu	6	May 21, 2008
Drop down list/menu	3	May 7, 2015
How do I get the if statement correct in the lines that has it in the program?	2	Mar 16, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022

How to change the size of a drop-down menu

Cliff R.

Disco Octopus

Guest

Louis Somers

Toby A Inkster

Mark Parnell

brucie

Cliff R.

rf

Louis Somers

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads