Remove the complete styling of an HTML button/subm

问题:

Is there a way of completely removing the styling of a button in Internet Explorer? I use a css sprite for my button, and everything looks ok.

But when I click the button, it moves to the top a little, it makes it look out of shape. Is there a css click state, or mousedown? I don't know what triggers that state.

I know it's not a really big deal, but sometimes it's the small things that matter.

回答1:

I'm assuming that when you say 'click the button, it moves to the top a little' you're talking about the mouse down click state for the button, and that when you release the mouse click, it returns to its normal state? And that you're disabling the default rendering of the button by using:

input, button, submit { border:none; } 

If so..

Personally, I've found that you can't actually stop/override/disable this IE native action, which led me to change my markup a little to allow for this movement and not affect the overall look of the button for the various states.

This is my final mark-up:

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

回答2:

I think this provides a more thorough approach:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

<button>Example</button>

回答3:

Try removing the border from your button:

input, button, submit
{
  border:none;
}

回答4:

Your question says "Internet Explorer," but for those interested in other browsers, you can now use all: unset on buttons to unstyle them.

It doesn't work in IE or Edge 18, but it's well-supported everywhere else.

button {
  all: unset;
}

<button>check it out</button>

回答5:

In bootstrap 4 is easiest. You can use the classes: bg-transparent and border-0

回答6:

I think it's the button "active" state.