时间戳

首页 > 解决方案 > 需要使用 css Apprearace 属性将复选框转换为看起来像单选按钮

javascript - 需要使用 css Apprearace 属性将复选框转换为看起来像单选按钮

问题描述

似乎css3中的外观属性正在更新。我曾经在1个月前使用过以下代码，并且运行良好。但是现在外观属性没有将复选框转换为单选按钮。我已经在几个浏览器上尝试过，但没有运气。

谁能告诉我为什么它现在不起作用？并为我提供更好的解决方案。所以我的复选框看起来像单选按钮。

input[type="checkbox"] {
  -webkit-appearance: radio; /* Chrome, Safari, Opera */
  -moz-appearance: radio;    /* Firefox */
  -ms-appearance: radio;     /* not currently supported */
}
<label><input type="checkbox" name="checkbox"> Radio button 1</label>
<label><input type="checkbox" name="checkbox"> Radio button 2</label>

input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
  -ms-appearance: checkbox;     /* not currently supported */
}
<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>

标签： javascripthtmlcssangular

解决方案

如果它以前有效，则可能是您的 FireFox 80.0 ( 32 位) 版本发生了变化，或者您使用了 64 位版本。我在 FireFox 79.0 ( 64bit ) 上进行了测试，你的 css 运行良好。

Mozilla.org 说外观（-moz-appearance，-webkit-appearance）是一种实验性技术。所以请谨慎使用。

他们提到： 从 62 版开始：此功能位于 layout.css.webkit-appearance.enabled 首选项（需要设置为 true）之后。要更改 Firefox 中的首选项，请访问 about:config。

检查这是否有所作为。

推荐阅读