Geek Answers Handbook

Active style input button? (without anchors)

I am working on creating stylish buttons using as simple HTML as possible.

<input type="submit" value="Submit!" />

However, the style of the “pressed” state is difficult. Everywhere I watch online, designers seem to have circumvented this issue by using anchors and then using the CSS :active pseudo-class. Unfortunately, this is not on the buttons. They have :focus , but this does not work the same.

So my question is this: Is it possible to style “down” without changing this HTML? I am ready to use jQuery if necessary, but I basically hope that there is a clean CSS solution that does not include bindings. What do you all recommend?

Thanks!

+4
source share
4 answers

Actually, you can apply the :active pseudo-class to form buttons .

Here is an example:

http://jsfiddle.net/xvWG5/

Hope this helps!

+2
source 
 input:active { background-color: red; }

this works for me in Firefox, Chrome and IE9

+1
source

What style are you trying to achieve? I can see the font color of the elements in this fiddle changes to red when pressed in Safari6 and FF12.

W3 suggests that there may be inconsistencies between browsers in supporting dynamic pseudo-classes and processing of certain properties; you need to provide sample code that you are having problems with.

0
source

Do you have the option to use a tag? I think you will find it infinitely more flexible. For example, the active state really works for me in Safari, Chrome and Firefox (at the moment I do not have access to IE):

 button { background-color: red; color: white; font-weight: bold; font-size: 3em; border: 0; } button:active { background-color: blue; }​
0
source

More articles:


All Articles