How do I font a DropDownList?

[gnewsgroup]

I am using Themes for my asp.net 2.0 web application. I am using
Verdana font (11px) for the entire site, but all DropDownLists seem to
have Arial, and also a bigger font size (maybe 12px).

My Default.skin file contains this line:

<aspropDownList runat="server" CssClass="dropdownlist"></
aspropDownList>

My Default.css contains

body,td {font-family: Verdana, arial,sans-serif; font-size:11px; }

So, I thought if I add the following line, it should fix the
DropDownList font problem:

dropdownlist {font-family: Verdana, Arial, Sans-Serif; font-size:
11px;}

But, it doesn't.

Someone asked similar question here, but there was no clear answer.

Any hint? Thanks.

 

[Ujval Shah]

Hi,

please make class in css file
..dropDown
{
font-family: verdana;
font-size: 10px;
border-width: thin;
border-style: solid;
background-color: White;
border-color: #ffffff;
color: Black;
cursor: default;
}
so you can use class as <aspropDownList runat="server"
CssClass="dropDown"></aspropDownList>
and it will work..

 

[gnewsgroup]

Hi,

please make class in css file
.dropDown
{
font-family: verdana;
font-size: 10px;
border-width: thin;
border-style: solid;
background-color: White;
border-color: #ffffff;
color: Black;
cursor: default;}

so you can use class as <aspropDownList runat="server"
CssClass="dropDown"></aspropDownList>
and it will work..

Thank you. I tried it, but it did not work. Not sure what is going on.

 

[George Ter-Saakov]

You can do it by adding
select {font-family: Verdana, Arial, Sans-Serif; font-size:11px;}

so you do not need CssClass="dropdownlist"
<aspropDownList runat="server" CssClass="dropdownlist" />


PS: Should not it be a ".dropdownlist {font-family: Verdana, Arial,
Sans-Serif; font-size: 11px;}" notice dot in front of dropdown..

PPS: for some controls in .NET CssClass works a bit differently... It simply
adds <span class="dropdownlist">

So your HTML for
<aspropDownList runat="server" CssClass="dropdownlist"></aspropDownList>
Looks like
<span class="dropdownlist"><select>...</select></span>
Which is not the same as
<select class="dropdownlist">

George

 

[David Wier]

This worked fine for me, just copying and pasting - BUT I did need to make
sure I had the page pointing to my CSS file where I copied this code.
By using it this way, it only affects the one to which you add the
'CssClass' attribute.

By using 'select', it will affect all DropDownLists

David Wier
http://aspnet101.com
http://iWritePro.com - One click PDF, convert .doc/.rtf/.txt to HTML with no
bloated markup

 

[gnewsgroup]

You can do it by adding
select {font-family: Verdana, Arial, Sans-Serif; font-size:11px;}

so you do not need CssClass="dropdownlist"
<aspropDownList runat="server" CssClass="dropdownlist" />

PS: Should not it be a ".dropdownlist {font-family: Verdana, Arial,
Sans-Serif; font-size: 11px;}" notice dot in front of dropdown..

PPS: for some controls in .NET CssClass works a bit differently... It simply
adds <span class="dropdownlist">

So your HTML for
<aspropDownList runat="server" CssClass="dropdownlist"></aspropDownList>
Looks like
<span class="dropdownlist"><select>...</select></span>
Which is not the same as
<select class="dropdownlist">

George

No wonder it should be select instead of dropdownlist. Now it works.
That's great. Thank you. So, I guess to font a <asp:TextBox>
control, I'll have in the skin file something like:

textbox {font-family: Verdana, Arial, Sans-Serif, font-size: 11px;}

Right?

 

[gnewsgroup]

This worked fine for me, just copying and pasting - BUT I did need to make
sure I had the page pointing to my CSS file where I copied this code.
By using it this way, it only affects the one to which you add the
'CssClass' attribute.

By using 'select', it will affect all DropDownLists

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
This is precisely my goal.

 

[George Ter-Saakov]

Nope, but you got the concept
the <asp:Textbox...> translates into <input type="text" ... > in HTML

So it should not be "textbox {font-family: Verdana, Arial, Sans-Serif,
font-size: 11px;}"

But "input {font-family: Verdana, Arial, Sans-Serif, font-size: 11px;}" will
work...


George.

 

[gnewsgroup]

Nope, but you got the concept
the <asp:Textbox...> translates into <input type="text" ... > in HTML

So it should not be "textbox {font-family: Verdana, Arial, Sans-Serif,
font-size: 11px;}"

But "input {font-family: Verdana, Arial, Sans-Serif, font-size: 11px;}" will
work...

George.

Thank you, Goerge.

Yes, I figured that out by peeking into the HTML.

 

[George Ter-Saakov]

PS: Forgot to add that this line "input {font-family: Verdana, Arial,
Sans-Serif, font-size: 11px;}"
will change all buttons too not only input boxes...
Since buttons in HTML are <input type="button"...>

George.

 

[gnewsgroup]

PS: Forgot to add that this line "input {font-family: Verdana, Arial,
Sans-Serif, font-size: 11px;}"
will change all buttons too not only input boxes...
Since buttons in HTML are <input type="button"...>

George.

That's turns out to be fantastic, since I like to be consistent
anyway. I don't like to use all kinds of font flavors in my web
application. Unless there is a very special reason, I stick to one
font.