如何在表单元素中标记按钮活动onclick

时间:2014-04-26 20:46:28

标签: javascript css forms

如何使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>

这是我的CSS ......但活动背景不起作用......

    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);

1 个答案:

答案 0 :(得分:1)

以下是使用您的代码的FIDDLE,但我放了一个&#34;#&#34;在你的线前面:激活它。

:仅在按下键时显示活动,而不是在释放时显示。所以当你按住键时你可以看到米老鼠。

如果您在按下其他键之前将其更改为什么,则必须更改js代码。

CSS

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