编辑:原始答案不适用于移动设备。去here https://stackoverflow.com/questions/59454248/im-trying-to-put-a-button-inside-an-input-type-radio-s-label-for-mobile的解决方案。
我已经知道如何制作<input type="radio">
's <label>
看起来像任何特定浏览器的默认按钮<button>
通过使用 CSS 直到它看起来与<button>
我正在尝试复制。但是,每当有人从具有不同默认值的浏览器查看它时,这就会显得不合适<button>
。 (即使我可以复制每个默认值<button>
对于每一种浏览器,明天可能都会发明一种新的浏览器。)
因此,我想使用实际的按钮来获取适合浏览器的默认样式。
到目前为止的代码的重新创建:
<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">
to <input type="radio" name="choice" value="A" hidden>
并使用一些其他样式来显示它是否已检查,但现在出于诊断原因我将其保留。
如果您运行该代码片段,您会注意到单击<input type="radio">
按预期工作,但单击<button>
本身什么也不做。
这是另一个失败的尝试:
<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>
无论如何都是默认外观?
(是的,我已经知道我可以使用javascript来模拟<input type="radio">
的行为在<button>
但我将在整个网站的许多组中放置许多按钮。所以我只会设计风格<label>
手动,如果这意味着网站将更容易维护。同样,仅针对这一问题安装整个库。)
一个想法是添加pointer-events:none;
到按钮,但你不会有的样式: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
and :checked
说明:
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*/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)