Adding an image to submit button using CSS

Question

I'm attempting to use CSS in order to make a sumbit button containing an image. Here's the code:

HTML

<input type="submit" id="search" name="submit" alt="search" >

CSS

input#search{
    background:url(../search-icon.png);
    background-repeat: no-repeat;
    width:40px;
    height:40px;
}

This returns this submit button, but I don't want the word 'submit' or the gray square box to appear.

If anyone could suggest what the problem might be, it would be greatly appreciated.

You can try using `type="button"` – potasmic Jan 03 '14 at 14:18 — potasmic, Jan 03 '14 at 14:18

score 16 · Accepted Answer · answered Jan 03 '14 at 13:35

16

The gray box is caused by a default border being added to the submit buttons. Whereas the submit text is the default value for the button.

HTML:

<input type="submit" id="search" name="submit" alt="search" value="">

CSS:

input#search    {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}

answered Jan 03 '14 at 13:35

jfelsinger

444
3
12

This answer more appropriate.Thanks – asifaftab87 Nov 10 '14 at 13:01

score 1 · Answer 2 · answered Jan 03 '14 at 13:35

1

Add value with empty string to the input:

<input type="submit" id="search" name="submit" alt="search" value="">

answered Jan 03 '14 at 13:35

Bud Damyanov

30,171
6
44
52

score 1 · Answer 3 · answered Jan 03 '14 at 13:40

1

instead of input type="submit" you can use input type="image"

use this one line code

<input type="image" src="submit.gif" alt="Submit" width="48" height="48">

see DEMO

answered Jan 03 '14 at 13:40

AmanS

1,490
2
13
22

score 0 · Answer 4 · answered Jan 03 '14 at 13:34

You can use CSS text-indent to move the text away:

input#search {
    background:url(../search-icon.png);
    background-repeat: no-repeat;
    width:40px;
    height:40px;
    text-indent:-999px
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

score 0 · Answer 5 · answered Jan 03 '14 at 13:35

0

Set blank Value of the input type submit as shown below :

<input type="submit" id="search" name="submit" alt="search" value="" >

answered Jan 03 '14 at 13:35

SpiderCode

10,062
2
22
42

score 0 · Answer 6 · answered Jan 03 '14 at 13:39

0

try this

input#search {
background:url(../search-icon.png) no-repeat;
width:40px;
height:40px;
text-indent:50px;
overflow:hidden;
}

answered Jan 03 '14 at 13:39

Adeel Khanzada

73
12

score 0 · Answer 7 · answered Jan 03 '14 at 13:43

<!DOCTYPE html>
<html>
       <head>
       <style>
            input.search{
                background-image:url(url.jpg);
                text-indent:-9999px;
                width: 100px;
                height: 30px;
                border:2px solid rgb(0,102,153);
           }
       </style>
       </head>

       <body>
       <input type="submit" class="search" alt="search">
</body>
</html>

enter image description here

d4nyll · Answer 8 · 2015-01-27T08:38:43.890

I find this to be the most complete solution:

#submitbutton {
    background-image: url(http://paulabrown.net/search-button-png-210.png);
    background-repeat: no-repeat;
    height: 24px; // height of image
    width: 24px; // width of image
    padding: 0;
    border: none; // get rid of grey border
    color: transparent; // hide the text (without indenting it to hell)
    background-color: transparent;
    outline: none;
    display: block; // Ensure block element to apply this to inline-elements
}

score 0 · Answer 9 · answered Mar 02 '15 at 11:37

html: <input type ="submit" value ="" class="search-button"/>
CSS:
.search-button
{
    background-image: url("/images/search.png");
    background-repeat: no-repeat;
    min-width: 52px;
    min-height: 20px;
    width:52px;
    height: 20px;
    border:0;
}

Adding an image to submit button using CSS

9 Answers9

Linked