CSS Sprite Not Working in CodeIgniter Submit Button - html

Question

I am trying to do two things:
Replace a regular submit button in my CodeIgniter view (see code below) with a sprite button with roll over effects.
Submit my CodeIgniter form
<input type="submit" name="submit" value="Search" class="button" />
My sprite images (normal and hover states) both do not display using the code above. However, if I comment it out, and replace it with the following, it displays correctly, however I cannot submit my form:
<p class="button"></p>
Here is my css:
.button {
display:block;
width:135px;
height: 35px;
text-indent:-9999px;
}
.button a {
display:block;
width: 100%;
height: 100%;
background:transparent url(../images/button-sprite.gif) no-repeat top left;
outline:none;
}
.button a:hover {
background-position: 0 -35px;
}
What am I doing wrong?
SOLUTION:
Thank you #AdityaSaxena for your alternative solution. I found another solution too:
my.css
.button {
display:block;
width:135px;
height: 35px;
text-indent:-9999px;
background:transparent url(../images/button-sprite.gif) no-repeat top left;
}
.button:hover {
background-position: 0 -35px;
}
my.html
// ...
<input type="submit" name="submit" value="Search" class="button" />
// ...

Answer 1

You are not able to submit the form because you replaced your <input type="submit" /> with an anchor tag. You have to add the capability to submit a form to your <a> tag
.button a was not working because you did not have any <a> tag inside your <input type="submit"> tag which is what was expected when you used .button a
Few changes from the html and js and things will start working for you.
Your new HTML stays intact.
<p class="button"></p>
Your JS / Jquery if you can use it becomes this:
$('.button a').on('click', function(){
$(this).closest('form').submit();
});