html:
<body>
<div class="custom-div"><input type="button" id="x" name="button" value="Search" onclick="showUser()" class="button"/></div>
<input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
<input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
</body>
css:
#x
{
width: 100%;
height: 100%;
-webkit-border-radius: 19px;
-moz-border-radius: 19px;
border-radius: 19px;
background-color: #424242;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 1px 2px rgba(255,255,255,.75);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 1px 2px rgba(255,255,255,.75);
box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 1px 2px rgba(255,255,255,.75);
background-image: -webkit-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
background-image: -moz-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
background-image: -o-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
background-image: -ms-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
background-image: linear-gradient(to top, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
}
.custom-div {
width: 500px;
height: 500px;
}
JQuery:
$(function(){
var xxx ="img/on.png";
$("#x").click(function(){
$('#x').css({'background':' url('+xxx+') no-repeat','cursor':'pointer','border':' none'});
alert("click");
console.log("click");
});
});
i have input="button", and i will change my css of input="button" to add one image, but image not get full size of my div.
How i can set image full size of my div after i set event click (change image)