Question

我使用iCheck Plugin使用Angular Directive的单选按钮但我无法调整单选按钮的大小，因为我需要小尺寸的单选按钮。

任何人都能帮忙吗？

Answer 1

看起来iCheck的构造不允许更改尺寸。这些类引用了按钮样式叠加的png sprite。 icheck文件夹中有2x png图像精灵，但看起来它们用于处理高DPI显示。

最好的办法是使用photoshop创建额外的png精灵。然后将新样式定义添加到现有或新的css文件中。新样式将引用您更大的png文件。您必须调整高度，宽度和位置以适应新的尺寸。

我还没有尝试过这个，但我可能很快会做类似的事情，所以我可以为移动设备提供更大的iCheck单选按钮。在我的情况下，我可能会使用媒体查询，因此它会相应地调整iCheck的大小。

Answer 2

我在sprite中调整了图像大小（skins / minimal / blue.png），如下所示：See Image

我希望这会对你有所帮助！ :)

Answer 3

我已将green.css复制并重写为 green-2x.css ，并且工作正常。您只需将CSS 背景更改为 green@2x.png 。

$('input.flat-2x').iCheck({
    checkboxClass: 'icheckbox_flat-green-2x',
    radioClass: 'iradio_flat-green-2x'
});

/* iCheck plugin Flat skin, green 2x
----------------------------------- */
.icheckbox_flat-green-2x,
.iradio_flat-green-2x {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    background: url(//cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/green@2x.png) no-repeat !important;
    border: none;
    cursor: pointer;
}

.icheckbox_flat-green-2x {
    background-position: 0 0 !important;
}
.icheckbox_flat-green-2x.checked {
    background-position: -44px 0 !important;
}
.icheckbox_flat-green-2x.disabled {
    background-position: -88px 0 !important;
    cursor: default;
}
.icheckbox_flat-green-2x.checked.disabled {
    background-position: -132px 0 !important;
}

.iradio_flat-green-2x {
    background-position: -176px 0 !important;
}
.iradio_flat-green-2x.checked {
    background-position: -220px 0 !important;
}
.iradio_flat-green-2x.disabled {
    background-position: -264px 0 !important;
    cursor: default;
}
.iradio_flat-green-2x.checked.disabled {
    background-position: -308px 0 !important;
}

/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    .icheckbox_flat-green-2x,
    .iradio_flat-green-2x {
        background-image: url(green@2x.png);
        -webkit-background-size: 352px 44px;
        background-size: 352px 44px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>

<input type="checkbox" name="name" class="flat-2x">

<input type="radio" name="name" class="flat-2x">
<input type="radio" name="name" class="flat-2x">

调整iCheck JQuery Radion按钮的大小

3 个答案: