Adding an image to input[type=submit]

Question

I have an ecommerce store and have a payment gateway where I need to use input[type=submit].

It cannot be a button or input[type=image] but I want to put an icon in the value.

I need text and an icon something like submit >> except the '>' is a PNG.

I've been looking for a while and don't think this is possible. Are there any workarounds to get what I'm looking for?

I was thinking of creating an image and using CSS to add a background image but this won't be as responsive for different devices etc.

Simply create whatever you want (a <p> containing an <img> or example) and listen to the click event on it. Submit your form then. — Zenoo
– Zenoo, Commented Nov 12, 2018 at 11:30
@Zenoo I can't unfortunately. For my payment gateway to work it has to be input[type=submit]. I had <button onclick="this.form.submit"> but this will not work. — Paddy Hallihan
– Paddy Hallihan, Commented Nov 12, 2018 at 11:32
input[type=image] behaves differently in what data it actually sends (image click coordinates), but between a normal input[type=submit] and a submit button, there should be no significant differences. “I had <button onclick="this.form.submit"> but this will not work” - well then maybe it is not what you need to begin with; but we can’t know what that is, if you don’t show us how this form normally gets submitted to begin with. Show us the original, “working” input field, plus any JS logic that might be attached to it. — misorude
– misorude, Commented Nov 12, 2018 at 11:37
@misorude input[type=submit] is the only thing that will work for my payment gateway no js or anything, I tried changing it to a button for styling purposes only. — Paddy Hallihan
– Paddy Hallihan, Commented Nov 12, 2018 at 11:46
Show us the HTML for the original submit input. As long as you specify name and value the same for a submit button, I don’t see why this should not work. — misorude
– misorude, Commented Nov 12, 2018 at 11:52

Hamza Haider · Accepted Answer · 2018-11-12 11:40:37Z

1

You can do it with css by doing the following code. Don't use inline this will make your input tag messy.

.YourInputClass
{ 
    background-image:url('http://portal.3spos.com/content/images/flag-saudi-arabia.png');
    background-repeat:no-repeat;
    background-position:left top;
    padding-left:14px;
}

   <input class="YourInputClass" style="text-align: right;"  type="textbox" name="text"/>

edited Nov 12, 2018 at 11:40

answered Nov 12, 2018 at 11:35

Hamza Haider

7386 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paddy Hallihan Over a year ago

Thanks this works exactly as I wanted. However I want to apply this to a few buttons with different text in them and was hoping to try get the text and the icon centered together. At the moment the text is centered and the image has x+y co-ordinates in background-position.

Hamza Haider Over a year ago

You are welcome you can change the styling as you want. Good Luck

Collectives™ on Stack Overflow

Adding an image to input[type=submit]

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related