css - 样式复选框和单选按钮

Question

我一直在尝试设置位于 td 元素内部的复选框和单选按钮的样式。结构如下:

 <table>

      <tr>
        <td>  <input type="checkbox" value="y" title="" id="" editbindings="" groupname="" pt-type="" style=" "> checkbox1</td>
        <td>  <input type="checkbox" value="y" title="" id="" editbindings="" groupname="" pt-type="" style=" "> checkbox1</td>
           <td>  <input type="radio" id="" groupname="" name="gender" checked="" value="" pt-type=""> male
         <td>  <input type="radio" id="" groupname="" name="gender"  value="" pt-type="">  female
        </td>
      </tr>
    </table>

有多种方法可以使用标签设置复选框和单选按钮的样式。但在我的情况下，代码已生成，无法在输入复选框和 radio 后插入标签。我的意思是 html 部分仍然如上所示，无法更改。我用css方法尝试了这个方法。但这只适用于谷歌浏览器。我也附上了我的代码笔的链接。 http://codepen.io/destinypallavi/details/RGbyoA/非常感谢社区的帮助

-webkit-appearance: none; 
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;

非常感谢来自社区的任何帮助，我想要样式化单选按钮和复选框而不使用标签技术，使 html 完好无损先感谢您。我不介意使用 js 进行样式设置，只要它至少在 firefox 和 ie10 中看起来更好，但如果在 css3 中提供适当的技术，那就更好了。

Answer 1

我找到了一个很好的解决方案:

input[type=checkbox].agb {
all: unset;
/* rest of styles here */
}

它将所有浏览器生成的 css 样式设置为无，您可以从头开始设置复选框的样式，就像您想要的一样，没有任何标签黑客或其他东西。

我会给你一个我的简单自定义复选框的例子。

input[type=checkbox].agb {
    all: unset;
    width: 32px;
    height: 32px;
    margin-right: 5px;
    display: block;
    background: var(--color-2);
    float: left;
}

input[type=checkbox].agb:checked {
    background: var(--color-4);
    color: var(--color-2)
}

input[type=checkbox].agb:checked::after {
    content: "✔";
    display: block;
    font-size: 26px;
    padding-left: 5px;
}

应该也适用于单选按钮。