Can you style an active form input's label with just CSS

Question

Given the following html

label

         


        

Answer 1

Give your input button a style class

css style:

INPUT.book:hover, INPUT.book:focus:hover {
    background-image:url(book_over.png);
    background-repeat:no-repeat;
    height: 40px;
    width: 140px;
    font-family:calibri, Tahoma;
    font-size:20px;
    color:#ffffff;
    text-align: center;
    font-weight: bold;
}

INPUT.book {
    background-image:url(book_active.png);
    background-repeat:no-repeat;
    height: 40px;
    width: 140px;
    font-family:calibri, Tahoma;
    font-size:20px;
    color:#ffffff;
    text-align: center;
    font-weight: bold;
}

and the input html:

I haven't figured out yet, how to avoid grey background even though I have a transparent png file, maybe just an jpg will do. But I hope this helps. Good luck :-)