Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Form button font change? 1

Status
Not open for further replies.
mpalmer12345

mpalmer12345

Programmer
Feb 16, 2004
59
US
Form button font change?

Is it possible within an HTML page to change the font on a form button so that all users see the same font?

Right now the VALUE= command between quotes is in what looks like Chicago font or something on my browser, and I'd like something nicer.

<FORM METHOD=POST ACTION="...
<BUTTON TYPE=SUBMIT NAME="FORM1" VALUE="FORM1">
 
Sort by date Sort by votes
I took the liberty of converting your sample button to conform nicely.

Moving on... you can change the font (and many other properties of a button) using style sheets. This can be done using "inline styles" or through inclusion of a "linked style sheet". I'll focus on the first option to begin with.

This will change the font of the button to be Verdana (if that is not present, then it uses Arial, and if that is missing it will use the default Sans Serif font for the browser):

Code: 
<input type="submit" name="FORM1" value="FORM1" style="font-family:verdana,arial,sans-serif;">

Now we change the font size (in this case to 11px):

Code: 
<input type="submit" name="FORM1" value="FORM1" style="font-family:verdana,arial,sans-serif;font-size:11px;">

And we can change the font colour:

Code: 
<input type="submit" name="FORM1" value="FORM1" style="font-family:verdana,arial,sans-serif;font-size:11px;color:#990033;"

The very same thing can be achieved using a style sheet in the <head> section of the page. This example shows a style sheet definition for a class called redButton. Notice that a class="redButton" has been added to the button below:

Code: 
<html>
<head>
<style type="text/css">
.redButton {font-family:verdana,arial,sans-serif;font-size:11px;color:#990033;}
</style>
</head>
<body>
<form name="myForm">
<input type="submit" name="FORM1" value="FORM1" class="redButton" />
</form>
</body>
</html>

And finally, the class can be defined in an external style sheet and linked into the page:

Code: 
<html>
<head>
<link rel="stylesheet" href="mystylesheet.css" type="text/css" />
</head>
<body>
<form name="myForm">
<input type="submit" name="FORM1" value="FORM1" class="redButton" />
</form>
</body>
</html>

And the external style sheet mystylesheet.css contains just this:

Code: 
.redButton {font-family:verdana,arial,sans-serif;font-size:11px;color:#990033;}

I hope this is all make some kind of sense -- and gives you a crash course in styles while you are at it!

Jeff
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
695
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
630
3esolar
3
craigward
  • Locked
  • Question
Change IIS7 Default landing page
Replies
1
Views
106
feherke
feherke
lupidol
  • Locked
  • Question
CSS fonts from Google Font 3
Replies
5
Views
233
lupidol
lupidol
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
149
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top