编辑:原始答案不适用于移动设备。去 here对于一个解决方案。
我已经知道如何制作 <input type="radio">
的 <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">
至
<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
和 :hover
状态。
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
状态:
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*/