9

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.

http://cs12jcw.icsnewmedia.net/screenshot.png

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

Moduo
6236 silver badges18 bronze badges
asked Jan 3, 2014 at 13:31
1
  • You can try using type="button" Commented Jan 3, 2014 at 14:18

9 Answers 9

17

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 3, 2014 at 13:35
Sign up to request clarification or add additional context in comments.

Comments

1

Add value with empty string to the input:

<input type="submit" id="search" name="submit" alt="search" value="">
answered Jan 3, 2014 at 13:35

Comments

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 3, 2014 at 13:40

Comments

0

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

answered Jan 3, 2014 at 13:34

Comments

0

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

<input type="submit" id="search" name="submit" alt="search" value="" >
answered Jan 3, 2014 at 13:35

Comments

0

try this

input#search {
background:url(../search-icon.png) no-repeat;
width:40px;
height:40px;
text-indent:50px;
overflow:hidden;
}
answered Jan 3, 2014 at 13:39

Comments

0 
<!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

answered Jan 3, 2014 at 13:43

Comments

0

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
}
answered Jan 27, 2015 at 2:09

Comments

0 
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;
}
answered Mar 2, 2015 at 11:37

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.