Just trying to give a bold font to an input text

问题

I'm trying to give a bold font to an input this way below but it doesn't work..

<html>
<head>

</head>

<body>

<style type=”text/css”>

.jander2{

  font-weight: bold;

}

</style>

<form method="post" action="somepage">
        <input id="jander" class="jander2">
</form>

</body>
</html>

回答1:

Your <style> should be in the <head> section:

<html>
 <head>
  <style type="text/css">
   .jander2{
     font-weight: bold;
   }
 </style>
 </head>
 <body>
  <form method="post" action="somepage">
   <input id="jander" class="jander2">
  </form>
 </body>
</html>

EDIT: To satisfy the commenter: use only standard double quotes, no curly special quotes as you had in your <style> tag.

回答2:

This works:

http://jsfiddle.net/4rAhy/

Code here:

Inline style: <input type="text" style="font-weight: bold;"></input><br />
<style>
.jander2 {
    font-weight: bold;
}
</style> 
External Style: <input type="text" class="jander2"></input>

回答3:

Form controls are strange beasts. Some browsers don't let you style them at all, others only let you do a few limited things. Generally, this is because the browser gets the form controls from the operating system, rather than generating them itself.

That said, bold text should certainly be within the realm of attributes you can style. I think the problem is the curly quotes around "text/css" in your style declaration. (Putting the style declaration in the body can be a validation error depending on your doctype, but it should still work.)

回答4:

This by its self works

<html>
 <head>
  <style type="text/css">
   .jander2{
     font-weight: bold;
   }
 </style>
 </head>
 <body>
  <form method="post" action="somepage">
   <input id="jander" class="jander2">
  </form>
 </body>
</html>

What I'm thinking is that you have something like

input{font-weight: normal;}

kicking around in your other CSS. Take a look to see if there is any other CSS that might be overriding .jander2

Remember CSS is read top to bottom, so styles that are applied later will override styles that are applied earlier.

Alternatively you can try

  <style type="text/css">
   .jander2{
     font-weight: bold !important;
   }
 </style>

But this isn't recommended since it just masks the problem.

回答5:

And if you want to cheat, then this is another solution:

    <input type='text'  size='35' style='font-size: 16px;font-weight: bold;' value = 'Hi'  />

来源：https://stackoverflow.com/questions/5408292/just-trying-to-give-a-bold-font-to-an-input-text

标签

css

input

stylesheet