Remove the complete styling of an HTML button/submit
Solution 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>
Solution 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>
Solution 3
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, but it's well-supported everywhere else.
https://caniuse.com/#feat=css-all
Accessibility warning: For the sake of users who aren't using a mouse pointer, be sure to re-add some :focus
styling, e.g. button:focus { outline: orange auto 5px }
for keyboard accessibility.
And don't forget cursor: pointer
. all: unset
removes all styling, including the cursor: pointer
, which makes your mouse cursor look like a pointing hand when you hover over the button. You almost certainly want to bring that back.
button {
all: unset;
cursor: pointer;
}
button:focus {
outline: orange 5px auto;
}
<button>check it out</button>
Solution 4
Try removing the border from your button:
input, button, submit
{
border:none;
}
Solution 5
In bootstrap 4 is easiest.
You can use the classes:
bg-transparent
and border-0
Related videos on Youtube
Saif Bechan
I am a Full Stack Web Developer with industry experience building websites and web applications. I specialize in JavaScript and have professional experience in working with PHP, Symfony, NodeJS, React, Redux and Apollo GraphQL. To ensure high quality and standards I have extensive knowledge on CI/CD pipelines such as GitLab CI and testing frameworks such as JUnit, PHPUnit and Cypress.
Updated on December 21, 2021Comments
-
Saif Bechan over 2 years
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.
-
Saif Bechan about 14 yearsIt has to be the active state, you are right +1 for that. But i did not get it to work properly
-
sheriffderek over 6 yearsI don't think background has a 'none' - and the !important is no good.
-
Ivan Prihhodko over 6 yearsUsually, when you're doing this you want to override existing styles that exist for a button. It's rare that you want to do this with clean, unstyled HTML, hence the use of
!important
. That said I've removed it as it's a situation decision.background: none
is entirely valid: stackoverflow.com/questions/20784292/… -
sheriffderek over 6 yearsTo each their own regarding !important. I don't think I could work on a project where I was forced to use it. RE: 'none' Here's a reference that is better than a SO post. When you use 'background' by itself, you are really using shorthand and clobbering all the attributes.
-
Kate almost 6 yearsI was driving myself nuts over the difference between styling an image and some text inside a button and having it look the same as it does outside a
<button/>
...in my case,font: inherit;
did the trick. Thank you! -
John Hooper over 5 yearsI think for accessibility purposes you probably want to leave that outline there. otherwise when you tab over it there is no visual cue where you are. great answer though!
-
shinzou over 5 years"I think" is not an answer.
-
Will Ediger about 5 yearsThank you for this!
-
SandroMarques almost 5 yearsFor those who want to inherit the text alignment, please add
text-align: inherit;
-
Bachet over 4 years+
shadow-none
for me and it's sufficient. Thx! -
Devin about 4 yearsThis is not advisable for accessibility reasons. You'll need to add back all of the
outline
styles for the:focus
element state, for instance. -
Dan Fabulich about 4 years@Devin Great point! I updated my post with a suggestion to re-add an
outline
style. (But I don't think there's anything else that we need to re-add for a11y purposes. Do you know of anything?) -
Webwoman about 4 yearsbeware the using of
type
andattribute
in reset.css, the type and attribute's declaration has precedence over class' declaration. Specificity is ranked uisng the sum of all the specificity factor. -
Andre Zimpel over 3 yearsBeen here 50+ times. 🤠
-
PestoP over 2 yearsThis is incredible:
{ all: initial; font: inherit; color: inherit; }
-
hb20007 over 2 yearsAlso
text-align: left
-
maxime schoeni over 2 yearsAlso
border-radius: 0
(especially for iOS) -
Dan Fabulich over 2 yearsOld Safari color warning: Setting the text
color
of the button after usingall: unset
can fail in Safari 13.1, due to a bug in WebKit. (The bug is fixed in Safari 14 and up.) "all: unset
is setting-webkit-text-fill-color
to black, and that overrides color." If you need to set textcolor
after usingall: unset
, be sure to set both thecolor
and the-webkit-text-fill-color
to the same color. -
Aprillion about 2 yearsI found out
user-select: inherit
is also useful to allow copy&paste (when I want to list all properties instead ofall: unset
to keep the default focus outline)