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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Skinning HTML forms

Status
Not open for further replies.
yumbelie

yumbelie

Programmer
Dec 31, 2002
96
GB
Hi, right, not sure if this is the right forumn, but basically I want to change the 'skin' of HTML Form buttons. I'm not entirely sure if this is done via Javascript, CSS Style sheets etc, as I'm still trying to work out how it's done. I've seen various websites with nicely skinned buttons, which I feel really adds to the site, quite apart from the fact standardising them prevents discrepencies that appear between platforms (e.g. Windows XP form buttons and Windows 2000). What I don't want is 'rollover' graphics, i.e. changing the 'submit' button to a graphic and then using JavaScript to create a rolled over state (e.g. blue/green) I want the full clickable button that depresses correctly.

Anyway any help/direction pointing would be great. I am, and I don't know if this is releveant, using PHP for my back end code (generating the pages content etc).

Thanks

Joseph.
 
Sort by date Sort by votes
Using javascript to do a graphic swap is how I usually see this done.

What happens is they have an image which the button up and an image which is the button down and maybe an image which is the button highlighted.

Then the button is up and not highlighted when no mouse over it.

Mouseover switch to highlighted

Mousedown switch to image down

Mouseup switch to image up.

By making it an
<input type=&quot;button&quot; src=...>

You get the little finger when the mouse is over it as well.

If there's a better way (particularly a way which doesn't require two or three images per button, I'd love to hear it too.

-Rob
 
Upvote 0 Downvote
USe CSS to change the colours, add backgrounds etc. Very simple with CSS.

<head>
<style type=&quot;text/css&quot;>
<!--
.go {define whatever styles you want here}
-->
</style>
</head>

<body>
<input type=&quot;submit&quot; class=&quot;go&quot; />


É ::
 
Upvote 0 Downvote
Fantastic, thanks guys, I'll give it a go. Seems totally logical to do it that way now that you've pointed it out :)

Joseph.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

smittywes38
  • Locked
  • Question
HTML Calendar Coding 1
Replies
1
Views
95
Mike Lewis
Mike Lewis
rpearson
  • Locked
  • Question
HTML\CSS - Horizontal Nav Bar Placement
Replies
1
Views
84
Mike Lewis
Mike Lewis
Jtorres13
  • Locked
  • Question
General web design question, .JSP vs .HTML
Replies
6
Views
95
spamjim
spamjim
ebstarasia
  • Locked
  • Question
Import HTML files to Drupal
Replies
5
Views
103
kjv1611
kjv1611
ChrisHunt
  • Locked
  • Helpful tip
The Current State of HTML5 Forms
Replies
3
Views
78
aich69
aich69

Part and Inventory Search

Sponsor

Back
Top