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

Answer 1

Add value with empty string to the input:

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

Answer 2

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;
}

Answer 3

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;
}

Answer 4

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

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

Answer 5

try this

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

Answer 6

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