样式复选框和单选按钮答案

【问题标题】：styling checkbox and radio button样式复选框和单选按钮
【发布时间】：2017-01-07 15:46:49
【问题描述】：

我一直在尝试设置位于 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>

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

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

非常感谢社区提供的任何帮助，我希望在没有标签技术的情况下设置单选按钮和复选框的样式，从而使 html 保持完整先感谢您。我不介意使用 js 进行样式设置，只要它在 firefox 和 ie10 中看起来更好，但如果 css3 中有适当的技术，那就更好了。

【问题讨论】：

标签： css

【解决方案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;
}

也应该与单选按钮一起使用。

【讨论】：

这个解决方案效果很好，对于那些好奇的人来说，大多数主流浏览器都支持它，但不支持 IE11 caniuse.com/css-unset-value

【解决方案2】：

由于您无法更改 html，因此无法使用纯 css 解决方案。您建议 javascript 是可以接受的，所以下面是使用 javascript 的解决方案以及对您的 css 的一些修改：

Updated codepen

这里的方法是遍历您在 javascript 中的输入，添加唯一 ID，用与所述 ID 匹配的标签围绕文本节点，并添加一个“样式”类（这与 CSS 的更改一起意味着，如果非 javascript 浏览器遇到此页面，它仍会根据操作系统默认值正确显示。

我还对您的 CSS 进行了一些其他必要的更改，但是它有点乱，所以您可能想玩弄定位等。

不过，重要的是我没有对 HTML 进行任何更改 :)

免责声明：我不太擅长 javascript，所以可能有更好的实现方式。

Javascript：

var checkboxesToStyle = document.querySelectorAll("input[type=checkbox]");

var radiosToStyle = document.querySelectorAll("input[type=radio]");

var plainLabel = null;
var labelText = null;
var newLabel = null;

for (var i = 0; i < checkboxesToStyle.length; i++) {
    checkboxesToStyle[i].id = "check" + i;
    plainLabel = checkboxesToStyle[i].nextSibling;
    labelText = plainLabel.nodeValue;
    plainLabel.remove();
    newLabel = document.createElement("label");
    newLabel.setAttribute("for", "check" + i);
    newLabel.innerHTML = labelText;
    checkboxesToStyle[i].parentNode.appendChild(newLabel);
    checkboxesToStyle[i].className = 'styled';
}

plainLabel = null;
labelText = null;
newLabel = null;

for (var i = 0; i < radiosToStyle.length; i++) {
    radiosToStyle[i].id = "radio" + i;
    plainLabel = radiosToStyle[i].nextSibling;
    labelText = plainLabel.nodeValue;
    plainLabel.remove();
    newLabel = document.createElement("label");
    newLabel.setAttribute("for", "radio" + i);
    newLabel.innerHTML = labelText;
    radiosToStyle[i].parentNode.appendChild(newLabel);
    radiosToStyle[i].className = 'styled';
}

【讨论】：