Question

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

我的目标浏览器：IE9 +，firefox，chrome桌面/移动设备，iphone / ipad的safari。

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

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

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

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

有没有人对此有任何解决方案？...也许我们可以为所有人一劳永逸地推广它。

Answer 1

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

可在此处找到一个示例：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;

    }

Answer 2

这可能会有帮助..不使用ID和FOR检查这个。

＆＃13;

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

＆＃13;

<label>
  <input type="checkbox" />Check me
  <i></i>
</label>

＆＃13;

Answer 3

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

CUSTOM复选框/单选按钮，不使用ID和FOR并使用angular.js

3 个答案: