CODEWITHSUNDEEP
javascriptcssforms
salitola
salitola

Reputation: 11

how to mark button active onclick in form element

How can make the input button active with Onclick? 

<div class="paForm-right">
    <form onsubmit="" name="form1" id="form1" method="post">
        <input type="submit" class="paForm-choose" id="paForm-bottom-vk" value="Visitenkarten" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-briefbogen" value="Briefbogen" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-flyer" value="Flyer" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-faltblaetter" value="Faltblätter" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-einzelblaetter" value="Einzelblätter" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-plakate" value="Plakate" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-postkarten" value="Postkarten" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-prospekte" value="Prospekte" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-kataloge" value="Broschüren usw." name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-mappe" value="Mappe" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-buch" value="Bücher" name="submit" />
        <input type="submit" class="paForm-choose" id="paForm-bottom-calender" value="Kalender" name="submit" />
        <input type="hidden" name="value[Produkt]" id="senden" value="Detailanfrage" />
    </form>
    <br />
</div>

this is my CSS... but the active background do not work...

    input.paForm-choose:hover 
background-color:#D10C2D;


#paForm-bottom-vk 
background-image:url(../Icon_Visitenkarte_HG-Trans.png);

#paForm-bottom-vk:hover 
background-image:url(../Icon_Visitenkarte_HG-Trans.png);


#paForm-bottom-vk:active 
background-image:url(../Icon_Visitenkarte_HG-active.png);

Upvotes: 1

Views: 1518

Answers (1)

TimSPQR
TimSPQR

Reputation: 2984

Here is a FIDDLE using your code, with the exception of the fact that I put a "#" in front of your line with the :active on it.

The :active only shows when the key is pressed, not when it is released. So you can see Mickey Mouse when you press and hold the key.

If you what to have it changed until a different key is pressed you'll have to change the js code.

CSS

#paForm-bottom-vk:active {
background-image:url('http://i.imgur.com/1Xm81k2.jpg');
}

Upvotes: 1

Related Questions