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>

有方法可以使用标签设置复选框和单选按钮。但在我的情况下，代码生成，输入复选框和无线电后无法插入标签。我的意思是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中有适当的技术，它会好得多。

Answer 1

看到你无法改变你的html，一个纯粹的CSS解决方案是不可用的。你建议javascript是可以接受的，所以下面是一个使用javascript和你的css的一些修改的解决方案：

Updated codepen

这里的方法是在javascript中迭代你的输入，添加唯一的ID，用匹配所述ID的标签环绕文本节点，并添加一个＆＃34;样式的＆＃34; （这与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';
}

Answer 2

我找到了一个不错的解决方案：

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

它将所有浏览器生成的css样式都设置为none，并且您可以从头开始设置复选框的样式，就像您希望没有任何标签hack或其他东西一样。

我将举一个我的简单自定义复选框的示例。

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;
}

还应该使用单选按钮。

样式复选框和单选按钮

2 个答案:

使用Javascript：