Javascript 自定义复选框/单选按钮，不使用ID和FOR并使用angular.js_Javascript_Html_Css_Angularjs

Javascript 自定义复选框/单选按钮，不使用ID和FOR并使用angular.js

javascript html css angularjs

Javascript 自定义复选框/单选按钮，不使用ID和FOR并使用angular.js,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我想用自定义图像或svg或字体而不是浏览器的默认值来构建复选框和单选按钮。它必须在没有输入ID/标签的情况下工作。另外，我希望在不进行jquerydom操作的情况下实现它。我在整个应用程序中使用Angular.js，所以如果没有纯CSS解决方案，我需要一个自定义指令我的目标浏览器：IE9+、firefox、chrome桌面/手机、safari for iphone/ipad 到目前为止，我一直在使用这个纯CSS解决方案：因此，当点击标签时，复选框/无线电输入被选中/取消选中工作了很长一段时

我想用自定义图像或svg或字体而不是浏览器的默认值来构建复选框和单选按钮。它必须在没有输入ID/标签的情况下工作。另外，我希望在不进行jquerydom操作的情况下实现它。我在整个应用程序中使用Angular.js，所以如果没有纯CSS解决方案，我需要一个自定义指令

我的目标浏览器：IE9+、firefox、chrome桌面/手机、safari for iphone/ipad

到目前为止，我一直在使用这个纯CSS解决方案：因此，当点击标签时，复选框/无线电输入被选中/取消选中

工作了很长一段时间，但创造dinamic ID和FORs使其工作是一种痛苦！！在不使用ID/for的情况下单击标签时检查输入的一般解决方案是以下结构：

<label class="customCheckRadio">
    <input type="checkbox" />
    Check me!!!
</label>


检查我！！！

谈到纯CSS解决方案时说：“如果没有正确的标记顺序和在标签和输入之间创建关联的能力，这种技术是不可能的。你必须使用JavaScript来解决它。”

有人对此有任何解决方案吗？…也许我们可以一劳永逸地推广给每个人。

复选框可以在不使用标签的情况下进行自定义。方法如下： 1.通过将高度和宽度设置为0隐藏复选框。 2.使用填充设置复选框容器的高度。这为复选框提供了类似div的外观。其中，实际复选框不可见，但仅其背景可见。 3.使用不同的属性设置复选框容器的样式

可以在此处找到一个示例：

捕获：并非所有浏览器都支持这一点。（在IE9上表现良好）

CSS:

这可能会有帮助。。在不使用ID和的情况下签出此

input[type=“checkbox”]{
显示：无；
}
标签一：之前{
位置：相对位置；
右侧填充：3px；
顶部：1px；
字体系列：“Arial”；
字体风格：普通；
字体大小：正常；
内容：“✔";
颜色：#333；
}
标签输入：选中+i:之前{
内容：“X”；
颜色：#ffa500；
}
标签输入[禁用]+i:之前{
不透明度：.25；
}


检查我

这在没有ID的情况下可以工作，在所有morder浏览器中都可以工作，如果您有任何问题，请告诉我

<body>

 <style>

            .label-wrapper{
            margin-left: 10px;
            margin-right: 10px;
        }
        .label-wrapper input{
            display: none
        }
        .style-label
        {
            background: green;
            width: 15px;
            height: 15px;
            display: inline-block;
            border: 2px solid grey;
            border-radius: 50%;
            cursor: pointer;
        }
        .checkboxin:checked + .style-label{
            background: red;
        }


 </style>



<label class="label-wrapper">

    <input type="radio" class="checkboxin" name="radioComponent">

    <span class="style-label"></span>

</label>

    <label class="label-wrapper">

    <input type="radio" class="checkboxin" name="radioComponent">

    <span class="style-label"></span>

</label>

    <label class="label-wrapper">

    <input type="radio" class="checkboxin" name="radioComponent">

    <span class="style-label"></span>

</label>

</body>


.标签包装{
左边距：10px；
右边距：10px；
}
.标签包装器输入{
显示：无
}
.样式标签
{
背景：绿色；
宽度：15px；
高度：15px；
显示：内联块；
边框：2倍纯色灰色；
边界半径：50%；
光标：指针；
}
.checkboxin:选中+样式标签{
背景：红色；
}

问题标题要求不使用id的解决方案，您的解决方案基于id。。。

<body>

 <style>

            .label-wrapper{
            margin-left: 10px;
            margin-right: 10px;
        }
        .label-wrapper input{
            display: none
        }
        .style-label
        {
            background: green;
            width: 15px;
            height: 15px;
            display: inline-block;
            border: 2px solid grey;
            border-radius: 50%;
            cursor: pointer;
        }
        .checkboxin:checked + .style-label{
            background: red;
        }


 </style>



<label class="label-wrapper">

    <input type="radio" class="checkboxin" name="radioComponent">

    <span class="style-label"></span>

</label>

    <label class="label-wrapper">

    <input type="radio" class="checkboxin" name="radioComponent">

    <span class="style-label"></span>

</label>

    <label class="label-wrapper">

    <input type="radio" class="checkboxin" name="radioComponent">

    <span class="style-label"></span>

</label>

</body>