输入类型按钮时图标内部出现问题

Question

I have a problem, i have 2 buttons that you can see below. I need to add errorIcon but want to maintain the looks in button 1. Button 1 have browser specifik style, i have done nothing to button1.

HTML:

Button1: <input type="button" value="Button1" />
Button2: <input type="button" class="errorIcon" value="Button2" />

CSS:

 .errorIcon{
    background: url("errorIcon.png") no-repeat scroll top left;
    padding-left: 10px;
    width: 10px;
 }

Please note that i cant use example below because it triggers something i cant do anything about. Something else in the program runs on "button". This example gives me Button1 with error img as i want it to be.

<button><span class="errorIcon></span></button>

Answer 1

You need to style both buttons cause of you leave first button unstyled it will change look depending on browser and system. So style both of them

You can style button using gradients like this http://www.cssbuttongenerator.com/

And add image via ::before or ::after