CSS复选框输入样式

任何input影响每个输入元素的样式.有没有办法指定样式以仅应用复选框而不对每个复选框元素应用类？

使用CSS 2,您可以这样做:

input[type='checkbox'] { ... }

这应该是现在相当广泛的支持..要查看对浏览器的支持,请访问:https://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign- 8953

我最近发现的用于设置Radio Buttons和Checkboxes样式的东西.之前,我不得不使用jQuery和其他东西.但这很简单.

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

您可以对复选框执行相同操作,显然更改input[type=radio]为input[type=checkbox]并更改border-radius:15px;为border-radius:4px;.

希望这对你有用.

我创建自己的无标签解决方案

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}