Controlling font size in <input type=text>

[peterinwa]

I always work with my screen at a high resolution but sometimes peek at lower reso because that's what most of my website visitors use. Today I noticed that at the lower reso the text in my text input boxes is ugly... much bigger than the text I put on the page which I drop down a size for lower reso viewing. Is there a way to control the size in the input boxes?

I started with WebTV and this may be WebTV-only, but I seem to remember a useStyle command. It caused the text in the input boxes to match the text on the page. The problem was that not just the size, but also the font and color matched. I just want to control the size in the <input type=text> boxes.

Thanks, Peter

[grahamstewart]

Use CSS.

Unfortunately IE doesn't support atribute selectors properly so the 'proper way' which is to specify a rule for

input[type=text]

will not work. So instead give your text inputs a class..

<input type="text" class="intext">

..and then style them in the CSS...

input.intext, textarea {
font: 50% Arial, sans-serif;
}

[peterinwa]

Thanks. I've been using HTML and JS for years, but always kept control of the page appearance using JS. I'll read up on CSS.

One question: Will the example you give work with N 4 and N 7 as well as IE?

Thanks, Peter

[pageoneresults]

grahamstewart, I've also been doing this...

body, div, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, select, td, textarea, tr, ul
{font-family:verdana, arial, helvetica, sans-serif;font-size:13px;line-height:16px;}

That one rule pretty much alleviates any worries about the cascade and a default font size across the board for the site. Do you see anything wrong with that? You would of course include all block elements that are utilized on the site in that rule.

[grahamstewart]

See the CSS forum for all the help you'll ever need.
Nick_Ws CSS crash courses are a good place to start (see the CSS forum library).

Don't know if it will work properly on NN4 - it should do but I don't have a copy handy to test with (I never code for NN4). It will be fine on all modern browsers.

pageoneresults: the problem with that approach is that you are using an absolute font size (13px) which means your page won't respond to the 'View->Text Size' menu in IE.

So users who are on hi-res displays will have to suffer tiny unreadable text.

[pageoneresults]

So users who are on hi-res displays will have to suffer tiny unreadable text.

Yup, I've been thinking about going relative and have experimented a couple of times and just am not comfortable giving up that control yet.

I've tested that font size on various monitor resolutions and it is very readable on a majority of the resolutions used. If someone is at a higher resolution than the norm (800x600 ¦ 1024x768) everything is going to appear smaller to them, including their system fonts. Unless of course they've made the modification to enlarge their system fonts.

I'm just having a real tough time using em and/or percentages. One of these days...

[grahamstewart]

I've tested that font size on various monitor resolutions and it is very readable...

Let me qualify that statement for you..."it is very readable to you"

It may be considerably less readable to someone who has a fuzzy CRT monitor, or someone who has different contrast/brightness/colour settings, or someone who has bad eyesight, etc etc

Of course, someone like this should have their default font size set a little larger, but that won't help them if you ignore their choice.

Relative font sizes are the way forward.

em and percentages are not hard to use. The secret is to only set a font size on a couple of high level elements and let the cascade handle the rest.

[pageoneresults]

Let me qualify that statement for you..."it is very readable to you"

And quite a few thousand others! ;)

Actually, when it comes to accessibility, I still have some things to learn in using relative sizing. Since I started off in a fixed environment, it has been difficult to release control of that environment to ones default settings.

I've also found that there are a disproportionate number of users who have no clue about resizing the text in their browser, no clue whatsoever.

Apparently the fixed type sizes only apply to IE. Other browsers offer different methods of viewing up or down in size and ignore any fixed sizing. If a user has an accessibility issue, they are most likely using a tool that allows them the access they are looking for. Those tools usually override any fixed design environments.

IMHO, it isn't as big of an issue as many point out. But then again, I've not yet delved into any of the more advanced css where relative sizing plays an important role.

[aspr1n]

pageoneresults:

body, div, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, select, td, textarea, tr, ul
{font-family:verdana, arial, helvetica, sans-serif;font-size:13px;line-height:16px;}

pageoneresults I think you'll find defining just for body will cascade for everything there bar the form elements, so it maybe overkill and can imagine it slowing a browser down.

asp

[pageoneresults]

Yup, I did that just to be on the safe side until I have a definitive list of where the cascade bugs are. At one point Opera had a problem with the cascade from body to <h>. There were other browsers that I tested and there was possibly another element that did not cascade properly. So, I figured I might as well cover the realm just in case there were any others that I missed.

You would think that the cascade would work from the body. But, it is not fail safe. Hey papabaer, any comments on this?

[peterinwa]

I got away from the subject for a few days but it turned out to be simple. I just inserted style='font-size: xx-small' into the <input type=text area and it did the trick.

Well, not quite that simple. It failed with N 4 and didn't seem to be needed with N 7 so I only do it for IE which most of my visitors use.

I also select a different font size for 800 and 1024 resolutions.

Thanks for the help, Peter