How to set css font-size for text input from style sheet

Question

I can't set the font-size of a text input from the style sheet. However, it works fine by setting the style attribute.

This works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
    <title>Test</title>
    <style type="text/css">
#about {
}
    </style>
</head>
<body>
    <input id="about" type="input" value="anything" style="font-size:21pt;" />
</body>
</html>

This does not work (font-size is ignored):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
    <title>Test</title>
    <style type="text/css">
#about {
    font-size:21pt;
}
    </style>
</head>
<body>
    <input id="about" type="input" value="anything" />
</body>
</html>

What am I missing? Surely, you're not expected to use inline style for all text inputs? That seems pretty tacky and redundant in some cases. Thanks a bunch!

The value of the content attribute in the meta tag is malformed; it should be text/html;charset=utf-8. Probably not relevant to this question, but surely a problem in cases where the tag would be needed. — Jukka K. Korpela
– Jukka K. Korpela, Commented Jul 22, 2012 at 4:41

cegfault · Accepted Answer · 2012-07-22 03:22:12Z

1

Change <style type="text/javascript"> to <style type="text/css">

You are confusing the browser because it is looking for JavaScript code, but you are feeding it CSS. <script> tags should be used for javascript, and <style> tags for CSS.

answered Jul 22, 2012 at 3:22

cegfault

6,6523 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user353885 Over a year ago

Sorry, that was just a typo in the example I made. I just fixed the typo, but the issue still exists (even with the correct text/css value)

cegfault Over a year ago

I cannot replicate the issue; with type="text/css", everything works for me. I literally just did a copy paste. There is no issue.

Jukka K. Korpela Over a year ago

@user353885, post the exact code you have used, via copy and paste, or, perhaps better here, a URL of your test case that demonstrates the issue. Also please specify the browser(s) you used for testing.

user353885 Over a year ago

Sorry again, when fixed my example, it still didn't work. Now it works, so I must be going insane. The full script still doesn't work, but I think the problem is that there's a duplicate #id on another style sheet that is over-writing the font-size. It was just a coincidence that I made a mistake (text/javascript) in my test example that created the exact same behavior. What are the odds of that? I only posted this to stackoverflow, it didn't seem likely that I would make an unrelated mistake that would cause the exact same same odd issue. Anyhow, I'll give you the check for your help. Thanks!

Chris · Accepted Answer · 2012-07-22 03:24:03Z

0

Your style block has a type of text/javascript. Remove that and it'll work fine.

answered Jul 22, 2012 at 3:24

Chris

10.5k3 gold badges31 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to set css font-size for text input from style sheet

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related