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

CUSTOM checkbox / radio buttons without using ID and FOR and using angular.js

本文关键字：js angular FOR ID 复选框 单选按钮 不用 自定义      更新时间：2023-09-26

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

我的目标浏览器:IE9+， firefox, chrome桌面/移动，safari for iphone/ipad。

到目前为止，我一直在使用这个纯CSS解决方案:http://www.thecssninja.com/css/custom-inputs-using-css因此，当单击LABEL时，复选框/单选输入被选中/未选中。

在一段时间内工作得很好，但是创建动态id和FORs使其工作是一个痛苦!!在不使用ID/for的情况下单击标签时检查输入的一般解决方案是这样的结构:

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

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

有人对此有任何解决方案吗?也许我们可以把它一劳永逸地推广到每个人身上。

复选框可以自定义而不使用标签。方法如下:1. 通过将高度和宽度设置为0来隐藏复选框。2. 使用填充设置复选框容器的高度。这为复选框提供了类似div的外观。实际的复选框是不可见的，只有它的背景是可见的。3.使用不同的属性来设置复选框容器的样式。

可以在这里找到一个例子:http://jsfiddle.net/cysCx/39/

问题:并非所有浏览器都支持此功能。(在IE9上运行良好)

CSS: 

label {  
        display: inline-block;
        vertical-align:bottom;
        margin-right: 15px;  
    }  
    input[type=checkbox],
    input[type=radio] {  
        content:"No";
        display: inline-block;
        cursor:pointer;
        padding:10px;
        height:0px;
        width:0px;
        border-radius: 15px;
        border: 1px solid black;
        background:red;
        vertical-align:bottom;
        box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .5), 0px 1px 0px 0px rgba(255, 255, 255, .2);
    } 
    input[type=checkbox]:checked,
    input[type=radio]:checked {
        content:"Yes";
        background-color: green;
        box-shadow: inset 0px 2px 3px 0px rgba(255, 255, 255, .2), 0px 1px 0px 0px rgba(0, 0, 0, .5);
        border: 1px solid white;
        /*content: "'2022";
        color: #f3f3f3;
        font-size: 30px;
        text-align: center;
        line-height: 18px;*/
    }
    input[type=checkbox]:disabled,
    input[type=radio]:disabled {
        background-color: grey;
        box-shadow:none;
        cursor:auto;
    }

这可能会有帮助。结帐不使用ID和FOR。

input[type="checkbox"] {
  display: none;
}
label i:before {
  position: relative;
  padding-right: 3px;
  top: 1px;
  font-family: 'Arial';
  font-style: normal;
  font-weight: normal;
  content: "✔";
  color: #333;
}
label input:checked + i:before {
  content: "X";
  color: #ffa500;  
}
label input[disabled] + i:before {
  opacity: .25;
}
<label>
  <input type="checkbox" />Check me
  <i></i>
</label>

这可以在没有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>

相关文章：