0
我从csscheckbox.com生成了一个自定义CSS复选框,并且想知道是否有方法可以即时更改框的宽度。更改自定义CSS复选框的大小
我附上了用于生成复选框的关键css和html,以便您看一看。理想情况下,我希望能够改变复选框的宽度和高度,就像我使用div更改其位置一样(但我知道它可能不是那么简单)。
input[type=checkbox].css-checkbox {
\t \t position:absolute;
\t \t z-index:-1000;
\t \t left:-1000px;
\t \t verflow: hidden;
\t \t clip: rect(0 0 0 0);
\t \t height:1px;
\t \t width:1px;
\t \t margin:-1px;
\t \t padding:0;
\t \t border:0;
\t }
\t input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
\t \t padding-left:25px;
\t \t height:20px;
\t \t display:inline-block;
\t \t line-height:20px;
\t \t background-repeat:no-repeat;
\t \t background-position: 0 0;
\t \t font-size:20px;
\t \t vertical-align:middle;
\t \t cursor:pointer;
\t }
\t input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
\t \t background-position: 0 -20px;
\t }
\t label.css-label {
\t \t background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_1fa1a7b77abfce3de56af87fcec6bed3.png);
\t \t -webkit-touch-callout: none;
\t \t -webkit-user-select: none;
\t \t -khtml-user-select: none;
\t \t -moz-user-select: none;
\t \t -ms-user-select: none;
\t \t user-select: none;
\t }
<div style="position:absolute;top:0;left:0;">
<input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox">
<label for="checkboxG4" class="css-label radGroup1 clr">Option 1</label>
</div>
谢谢!这很好。 – bryan 2015-02-11 16:47:24