我正在尝试放置< button>在< input type ="radio">的< label"内. [英] I'm trying to put a <button> inside an <input type="radio">'s <label>

问题描述

原始答案不适用于移动设备.转到此处提供解决方案.

The original answer did not work for mobile devices. Go here for a solution that does.

我已经知道如何使< input type ="radio"> 的< label> 看起来像任何特定浏览器默认按钮< button> ，方法是与CSS一起玩，直到看起来与我要复制的< button> 相同为止.但是，只要有人从具有不同默认< button> 的浏览器中查看它，它就会显得不合适.(即使我可以为每个浏览器复制每个默认的< button> ，明天也可能会发明一个新的浏览器.)

I already know how to make an <input type="radio">'s <label> look like the button of any specific browser's default <button> by playing with the CSS until it looks identical to the <button> I'm trying to replicate. But this will look out of place whenever someone views it from a browser that has a different default <button>. (Even if I could replicate every default <button> for every browser, a new one will probably be invented tomorrow.)

因此，我想使用一个实际的按钮来获取适合浏览器的默认样式.

Therefore, I want to use an actual button to get the default styling appropriate to the browser.

到目前为止的代码重现:

A recreation of the code so far:

<h1>Choose A or B</h1>
<label><button type="button"><input type="radio" name="choice" value="A">A</button></label>
<label><button type="button"><input type="radio" name="choice" value="B">B</button></label>

稍后，我将< input type ="radio" name ="choice" value ="A"> 更改为< input type ="radio" name =选择"value ="A" hidden> 并使用其他样式显示是否已选中，但出于诊断原因，我暂时将其保留.

Later I'll change <input type="radio" name="choice" value="A"> to <input type="radio" name="choice" value="A" hidden> and use some other styling to show if it's checked or not, but for now I'm leaving it in for diagnostic reasons.

如果运行该代码段，您会发现单击< input type ="radio"> 可以按预期工作，但是单击< button> 自己什么也没做.

If you run the snippet, you'll notice that clicking the <input type="radio"> works as intended, but clicking the <button>itself does nothing.

这是另一次失败的尝试:

Here is another failed attempt:

<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>

我什至尝试添加 disabled 属性.一切都没有按预期进行.我应该手动放弃和设置< label> 的样式，还是有办法访问< button> 的默认外观?

I even tried adding the disabled attribute. Nothing is working as intended. Should I give up and style the <label> manually, or is there a way to access <button>'s default appearance anyway?

(是的，我已经知道我可以使用javascript在< button> 上模拟< input type ="radio"> 的行为，但是我在整个网站上会有很多按钮，所以如果要使网站更易于维护，我将手动设置< label> 的样式.同样，对于安装整个网站库就是针对这个问题的.)

(Yes, I already know I could use javascript to simulate <input type="radio">'s behaviour on a <button> but I'm going to have lots of buttons in lots of groups throughout the website. So I'll just style <label> manually if it means the website will be easier to maintain. Likewise for installing an entire library just for this one problem.)

推荐答案

一个想法是向按钮添加 pointer-events:none; ，但是您将没有的样式>:focus ，:active 和:hover 状态.

An idea is to add pointer-events:none; to the button but you won't have the styles of the :focus,:active and :hover state.

button {
  pointer-events:none;
}

<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>

但是，您可以添加自己的自定义:focus :active :hover 和:checked 状态与:

You can, however, add your own custom :focus :active :hover and :checked state with:

input[type="radio"]:focus + label button{
    /*add checked style here*/
label:hover > button {
    /*add hover style here*/
}
label:active > button {
    /*add active style here*/
}
input[type="radio"]:checked + label button{
    /*add checked style here*/

这篇关于我正在尝试放置< button>在< input type ="radio">的< label"内.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！