how to style an input [type=image] button, and add a text value

Question

Here is my button:

<input name="Submit" type="image" src="some_button.jpg"/>

I would like to remove the src, give it a text value, and style with css, like this:

<input name="Submit" type="image" value="Next" class="mybutton"/>

The problem is that the value appears in Chrome and Safari with an ugly gray border around it. My research tells me that an input type=image must always have a src, but when I give it an invisible 1x1.png, the border goes away, but so does the text value.

I realize I can easily resolve this by changing to type="submit", but I am retrofitting a design to a pre-existing program, and must keep type="image" in order to preserve the script.

What are my options??

********Edit:************

Please see fiddle: https://jsfiddle.net/p486cprm/ Look for the ugly gray border. Not the same as the input border.

Could you not simply hide this input and replace it with the text input when appropriate? or have i misunderstood the issue? — hjardine, Dec 07 '15 at 10:54
I need this input as it triggers the submit function for the form. The script is triggered by an input of type "image". (Not my doing! But these are the cards I have to work with...) — p1xelarchitect, Dec 07 '15 at 11:11

score 1 · Answer 1 · edited Dec 08 '15 at 07:47

1

You can use below code for your button image and give it text-indent to omit button value.

 .buttonname {
    background: url(some_button.jpg) no-repeat;
    width: 150px; /*as per your wish*/
    height: 150px; /*as per your wish*/
    border: 0;
    text-indent: -9999px;
 }

edited Dec 08 '15 at 07:47

Asons

84,923
12
110
165

answered Dec 07 '15 at 11:04

Prajwal Shrestha

524
3
12

I don't think this help? Can you add it to my fiddle? https://jsfiddle.net/p486cprm/ – p1xelarchitect Dec 07 '15 at 11:08
@p1xelarchitect Please check this http://jsfiddle.net/p486cprm/1/ – Prajwal Shrestha Dec 07 '15 at 11:17
yes, that removes the gray border, but it would break my script. My one requirement is to keep type="image". Unfortunately... – p1xelarchitect Dec 07 '15 at 11:19

score 1 · Answer 2 · answered Dec 07 '15 at 11:49

1

.btn{
width:100px;
  height:auto;
}

<input class="btn" type="image" name="submit" src="http://www.clker.com/cliparts/f/d/n/5/p/g/button-red-next.svg">

please go through this code

answered Dec 07 '15 at 11:49

devendra tata

111
2
9

no, this does not work because i want to control the style via css, and i want the value to be text based, not image based. – p1xelarchitect Dec 07 '15 at 12:00

score 0 · Answer 3 · answered Dec 07 '15 at 12:16

0

OK, I solved it:

<label for="Submit" class="mybutton">
    Next
    <input name="Submit" id="Submit" type="image" src="blank.png"/>
</label>

answered Dec 07 '15 at 12:16

p1xelarchitect

289
1
6
19

how to style an input [type=image] button, and add a text value

3 Answers3