Brett Brett - 4 months ago 23
HTML Question

HTML / CSS How to add image icon to input type="button"?

I'm using the below CSS, but it puts an image in the center of the button. Any way to left or right align an icon using

<input type="button">
, so that the text and the image fit and align nicely?

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;

Answer

If you absolutely must use input, try this:

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

It's usually a little easier to use a button with an img inside:

<button type="submit"><img> Text</button>

However the browser implementations of button for submitting are inconsistent, as well as the fact that all button values are sent when button is used - which kills the "what button clicked" detection in a multi-submit form.