Help Questions | Solutions | Experts

Select Categories Below

.net [

]

Bluetooth [

]

browsers [

]

C# [

]

computer [

]

Errors [

]

forms [

]

HTML [

]

information tec... [

]

internet [

]

Start Your Own Q&A Site

Create your own Q&A site easily, allowing you to quickly grow a new community around any subject matter or generate new organic traffic for your existing website.

Question

Status: Open Points: 125 Time: 04:19 - Mar 06, 2008

jatinbpatil

How do I change the font size for an option within a SELECT tag in HTML?

I am creating a list in a select tag and I want to change the font size for the text which will be displayed within the options, just for one option. Is there a way to accomplish this?

Example:

<select >
<option>Text
<option>Text
<option>Text <------ I want to change the size of that text
<option>Text
<option>Text
</select

Categories:

HTML

Answer Discussion

Tutorials

nityananda

Date:: Jan 25, 2009

Time:: 17:01

Most easiest way is to define class for that specific 'option' and then you can use CSS to change font size.

Example:
<style>
.third {
color: #f00;
font-size: 2em;
}
</style>

<select>
<option>Text</option>
<option>Text</option>
<option class="third">Text</option>
<option>Text</option>
<option>Text</option>
</select>

allnillin

Date:: Feb 08, 2009

Time:: 02:24

you can type <h1> upto <h6>
<h6> is the smallest font size
<h1> is the largest font size

eg:<option><h6>Text</h6> or
<option><h5>Text</h5>

admin

Date:: Mar 24, 2009

Time:: 09:48

The question looks to be abandoned by the user who asked it. If no action is taken within 2 days, a Quomon Moderator will consider closing the question and distributing the points.

The Quomon Team

Muhammad Amman

Date:: May 12, 2009

Time:: 11:25

Sorry brother there is specfic rule crate for this.

chandrashekar

Date:: May 22, 2009

Time:: 09:10

you can create css and apply the css to your tag

exampal

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<select class="style1" >
<option>Text
<option>Text
<option>Text <------ I want to change the size of that text
<option>Text
<option>Text
</select>
</body>
</html>

Muhammad Amman

Date:: May 22, 2009

Time:: 12:06

LISTEN EVERYBODY:
there is no specific rulews in HTML for change in color ok
Jatin

sandeepkumar

Date:: Aug 24, 2009

Time:: 05:49

you fill the style your opiton field
style="color:#FF0000; font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-decoration:none;"
Like this

<select>
<option>Text</option>
<option>Text</option>
<option style="color:#FF0000; font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-decoration:none;">Text  </option>
<option>Text</option>
<option>Text</option>
</select >

naidugovindu

Date:: Sep 08, 2009

Time:: 04:30

Hi

You can use STYLE property in <option> directly like bellow

<option selected="selected" style="color:Red; font-size:12pt;"></option>

(OR)

Just write one css class for all options like
<style type="text/css">
.option
{
color:red;(or you can give hexa color values like #FFFFFF)
font-size:12pt;(or 12px)
font-family:Arial;
}
</style>

Use this in your web form its very simple.

Muhammad Amman

Date:: Sep 08, 2009

Time:: 05:12

Mr.jatinbpatil its impossible to change style in css or html of option menu....

rybakovavv

Date:: Mar 05, 2010

Time:: 14:54

Hi!
If you are beginner I can offer you to visit these
<a href="http://phpforms.net/tutorial/tutorial.ht... tutorials</a>. Its helped me very much. And I hope it will help you.

rybakovavv

Date:: Mar 05, 2010

Time:: 14:58

Hi!
If you are beginner I can offer you to visit these html tutorials http://phpforms.net/tutorial/tutorial.ht...
Its helped me very much. And I hope it will help you.

Liao013

Date:: Jan 07, 2011

Time:: 04:42

Well, maybe because your browser and windows system are not compatible, you'd better change your browser or maybe you can try the software tuneup360, which can help you solve all the computer problems.

Muhammad Amman

Date:: Jan 08, 2011

Time:: 16:14

<html xmlns="http://www.w3.org/1999/xhtml">&l... http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head><body>

<title></title>
<style type="text/css">
option {
color: white;
background-color: blue;
}
.even {
background-color: red;
color: blue;
}
</style>

<form action="" method="post" name="myform">
<table>
<tbody><tr>
<td>Toppings</td>
<td><select name="Topping_ID" size="6" multiple="" style="font-size:36px">
<option value="1">Option 1</option>
<option value="2" class="even">Option 2</option>
<option value="3">Option 3</option>
<option value="4" class="even">Option 4</option>
<option value="5">Option </option>
<option value="6" class="even">Option 5</option>
<option value="7">Olives</option>
<option value="8" class="even">Option 6</option>
<option value="9">Option 9</option>
</select></td>
</tr>
</tbody></table>
</form>

</body></html>

martinshrive

Date:: Dec 19, 2011

Time:: 11:07

You can put in css:

select option{ font-size: 11px;}

or if you want to change font only for one select list:

.sel select option{ font-size: 11px;}

#note: no dot before option and select, only before class

In your html you put:

<div class="sel">
<select>
<option ...>
<option ...>
</select>
</div>

Answer this Question

New User

Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

Tutorials cannot be submitted until the Answer Discussion is complete.

Submit answers in the Answer Discussion area

Questions
How do I change the font color for an option within a SELECT tag in HTML?
what if i just want to change the color of '4' in this option <option>Text 4<...