如何在表单元素中将按钮标记为活动的onclick答案

【问题标题】：how to mark button active onclick in form element如何在表单元素中将按钮标记为活动的onclick
【发布时间】：2014-04-26 20:46:27
【问题描述】：

如何使用 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);

【问题讨论】：

看起来您真的想拥有一个带有选项的<select> 并享受一个提交按钮的好处？
解决方案有点特殊，输入表单像按钮一样锁定在前端，并以不同的形式执行不同的任务......
在画廊中，例如基于相同 css 的按钮矩阵可用作不同滑块的链接： ...
并且在不同的联系形式中，输入调用基于 php 的特殊产品特定形式并加载到同一页面上......对于这个选择，我会在 Onclick 后激活按钮。 .

标签： javascript css forms

【解决方案1】：

这是一个使用您的代码的FIDDLE，除了我在您的行前面放了一个“#”并带有 :active 的事实。

:active 仅在按键被按下时显示，而不是在释放时显示。这样你就可以在按住键的时候看到米老鼠了。

如果在按下不同的键之前要更改它，则必须更改 js 代码。

CSS

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

【讨论】：

离开按键后应该显示的悬停颜色... js代码怎么显示？
但是单击按钮不会带您进入新页面吗？
无论如何，这里有一个你想要做的小提琴 - jsfiddle.net/ML39a。
单击一个按钮在个人查询中加载特殊的产品表单...，在简短的查询中php给出产品名称并在同一页面中加载表单
你的 js 代码看起来不错，我尝试修改我的输入元素非常感谢...