Add this to remove the background color and the border:
#searchterm {
border:0;
background:transparent.
}
Pregunta
I have the following code for a submit button on my website:
<button name="searchterm" type="submit" id="searchterm"><img src="images/ICON_Go.jpg"></button>
and the following CSS:
#searchterm {
margin:0px;
padding:0px;
white-space:nowrap;
width:auto;
overflow:visible;
}
and this is how it appears on the live website:
I would just like it to be the green go
image. I do not want the button graphic surrounding the image. How can I do this?
Thank you for any help. All help is appreciated.
Solución
Add this to remove the background color and the border:
#searchterm {
border:0;
background:transparent.
}
Otros consejos
Maybe this will fit what you need?
<button name="searchterm" type="submit" id="searchterm"></button>
button {
appearance:none;
-webkit-appearance:none;
background-color:transparent;
border:none;
outline:none;
background-image:url('http://i.stack.imgur.com/gojXZ.jpg');
background-size:40px 34px;
background-position: 18px 5px;
padding:22px 38px;
background-repeat:no-repeat;
cursor:pointer;
}
you need to reset the default styles for a button: button{ border:0; padding:0; outline:0; background:transparent;}
and add to your image: {display:block; }
I would think this will be a better approach to calling the image using background-image
CSS property.
#searchterm {
margin:0px;
padding:0px;
width:50px;
height:50px;
background:url("http://lorempixel.com/50/50") 0 0 no-repeat;
}
/--small alert code which proves this is actual button-/
function myFunction()
{
alert("Hello! I am an alert box!");
}
/-HTML code---/
<button name="searchterm" type="submit" id="searchterm" onclick="myFunction()"></button>
this way this will work as actual button. check the Demo. http://jsbin.com/malorefa/1/