Question

-webkit-appearance在让您自定义单选按钮的外观方面做得非常出色。但是，不使用webkit和旧版浏览器的浏览器并不支持这一点。所以它不会工作。

我正在寻找能够兼容不使用webkit的浏览器（如Firefox和IE）以及不支持CSS3的旧webkit浏览器的解决方案。

input[type="radio"] {
    margin: 50px 50px 0 0; padding: 0;
    width: 200px; height: 200px;
    position: relative; clear: none; float: left; display: inline-block;

    cursor: pointer; outline: none;
    background-color: #231f20;
    -webkit-appearance: none;
}

任何想法/解决方案？

Answer 1

有时候实现一个想法并不容易。如果用户只需要点击/悬停在圆圈（单选按钮）上与之交互，我们就可以轻松自定义收音机。但单选按钮的正常行为还允许用户单击/悬停在标签文本上与其进行交互。这意味着我们可能需要一个标签（对于文本）。但它并不那么容易。该标签只允许用户点击与隐藏的收音机进行交互，悬停在该标签上不会影响任何内容（通常该标签最后会附加，因此我们也无法向后移动以选择假收音机（它由2个伪元素:before和:after组成。所以我决定只使用1个标签。这个标签包含一个空的span元素作为第一个子元素，在此范围之后是当然是单选按钮的文本。span元素是我们设置假收音机的样式。但是如果让它们默认内联并且文本很长，它将跳转到下一行并垂直排列假收音机的左边缘（在第一行的正上方），这被认为是非常丑陋的，应该避免。所以我们需要将label显示为一个表格（使用{{1} }），第一列是display:table元素（apply span），标签文本将被第二列自动包装。那样当文本很长时，所有的行都将是wra在第二栏中受到了推动。

以下是代码详情：

<强> HTML ：

display:table-cell

<强> CSS ：

<div>
  <span class='radio'>
    <input type='radio' id='r1'name='radios' checked='true'/>
    <label for='r1'><span></span>
      Can I be wrapped when I grow longer and longer?
    </label>
  </span><br/>
  <span class='radio'>
    <input type='radio' id='r2' name='radios'/>
    <label for='r2'><span></span>Vote me up please :)</label>
  </span>
</div>

请注意，上面HTML代码中的外部div只是一个容器，用于对2个单选按钮进行分组，以测试包装长文本的能力。

以下是 Working Demo.

Answer 2

请注意-webkit-appearance外观与其他浏览器类型相同。因此，您可以尝试这些并查看其他浏览器的结果。

不幸的是，在存在不同的浏览器类型之前，您始终必须考虑解析代码的不同方式。没有一个好的解决方案，它将始终取决于您尝试实现的目标以及您的目标受众/浏览器类型。

以下是一个例子：

.thing {
  -webkit-appearance: value;
  -moz-appearance:    value;
  appearance:         value;
}

示例点数：appearance | CSS-Tricks

此外，如果您想了解有关不同CSS属性及其浏览器供应商特定变体的更多信息，这里有一个非常好的资源：Vendor-prefixed CSS Property Overview

自定义单选按钮

2 个答案: