Remove the complete styling of an HTML button/submit

I don't know if that is the problem, but you could try to set the active state also:

.button, .button:active{
...
}

EDIT: Used the following mini-sample in IE7 and cant see the button moving:

<html>
<head>
<style type="text/css">
.button
{
width   : 80px;
background  : none;
cursor  : pointer;
font-family : 'voltaeftu-regular',Times New Roman;
font-size   : 16px;
color   : #fff;
border  : 1px solid #0f0;
margin      : 0px;
padding     : 0px;
}
</style>
</head>
<body style="background:#f00;">
    <input class="button" type="submit"/>
</body>
</html>

Just set a border to see button surroundings. Code is working for me.


This bugged me for a long time as well, but I've found a decent solution.

First, you'll need some way of targeting a specific browser in your CSS. You could use Modernizr, or my personal favorite, this sweet little snippet from http://rog.ie/post/9089341529/html5boilerplatejs

<script>
var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
</script>

Next, in your HTML document, within your button, add a <span> tag that holds the button's contents. Style it to look fine in the friendly browsers, then add this bit of code to the button's :active styles in your CSS:

html[data-useragent*='Opera']

You can replace Opera with any browser name, then style the span to your liking.

It may look something like this:

html[data-useragent*='Opera'] button:active span { 
    position: relative; 
    left: -1px; 
    top: -1px; 
}

It's a bit hacky, and probably overkill for such a minor problem, but it works. Best of all, you have precise control over everything. You can even target just Windows machines, or iPads (with data-platform='iPad'), or a specific version of a browser, like this:

html[data-useragent*='Chrome/13.0']

Good luck!


Yes, I'm afraid it's an unavoidable problem with styling buttons that IE (and Opera) will move the content of the button down and to the right by one pixel when clicked.

You've got a bunch of possible approaches here:

  1. Use a <button> with a <span> inside it instead of an <input type="button">. Position the button relative and the span absolute at top/left 0, so that the movement of the button content doesn't affect the span. Ugly, and will break in other browsers, so you'd only want this styling to apply for IE-and-maybe-Opera.

  2. Use a link styled as a button instead of an actual button, with script applied to its click event. Unlike buttons, you get full control over consistent styling for links. I would advise against this as you're dragging in a load of link behaviours that don't make sense for a button, like middle-click, right-click-bookmark, drag-and-drop etc. Lots of people do use links to do button tasks but IMO it's highly undesirable. (Especially when they use javascript: links... ghastly.)

  3. Use an inactive element such as a <span> instead of an actual button, with script applied to its click event. Again, you get full styling control. This is what SO uses for actions like ‘add comment’. The trouble is that you break keyboard navigation; you can't use tab, space etc. to navigate and activate the controls. You can enable keyboard navigation in most browsers by giving the element a tabindex attribute, but putting tabindex on an inactive element is invalid HTML. You can alternatively write it from script, and also add script to allow space or return to activate the faux-button. But you'll never quite reproduce browser form field behaviour perfectly.

  4. Replace the whole thing with an <input type="image">. Naturally you get pixel-perfect control over the image! But trying to match rendering styles, and generating a new image for each button, is usually too much of a pain in the neck.

Options 2 and 3 also have the problem that they introduce a JavaScript dependency, so your form will break when JS is unavailable. You can mitigate that by using a normal <button> in the markup and replacing it with other controls from script, or if you're creating them from script anyway no problem. But in the end, my usual conclusion is that this is all far too much effort and too fragile a result, and that the best thing is to plump for option 0:

  • Live with it. It's usually not that bad a thing that button content moves a little bit when you click it.

Tags:

Html

Css

Internet Explorer

Button

State

Recent Posts