带有白色背景的 iCheck 单选框

Question

我正在使用 iCheck 设置我的复选框和单选框的样式。我想让单选框的背景变白。目前它是透明的，看起来像这样：

我认为编辑 blue.png 图片可能是个好主意

并将背景从透明更改为白色。但是现在，单选框不再是光滑的圆形了。这是现在的样子：

有没有更简单/更好的方法将背景更改为白色？我真的需要编辑 blue.png 吗？

这是生成图片的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="/resources/vendor/icheck-1.x/skins/square/blue.css">
    <style>
    span{
      margin-left: 10px;
      color:#FFF;
    }
    label{
      background-color: #08C;
      border-radius:20px;
      padding: 20px;
      display: inline-block;
    }
    </style>
  </head>
  <body>
    <label for='name' >
      <input type="radio" name='name' id='name'><span>Select this name</span>
    </label>
  </body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="/resources/vendor/jQUery/jquery-1.11.2.min.js"><\/script>')</script>
  <script src='/resources/vendor/icheck-1.x/icheck.js'></script>
  <script>
    $(document).ready(function(){

      $('input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-white',
        increaseArea: '20%', // optional
      });
    });
  </script>
</html>

编辑这里是修改后的blue.png

您可以下载未压缩的图像here。

Answer 1

更改那些复选框图形的样式比更改那些图像最简单。在 CSS 中使用 radial-gradient 或 border-radius 跟随 blue.css 中的选择器生成一个圆可能会达到类似的效果，但是您最好编辑主题本身。

您的图像看起来不平滑，因为您填充背景的方式消除了抗锯齿。

这里是 blue.png 和 blue@2x.png，背景像您所做的那样填充，保留抗锯齿，使用 GIMP。

请注意，您的风格很难在白色背景上看到。

Answer 2

肯定比更改 png 更简单。

我在 .icheckbox_square-xxx、.iradio_square-xxx 中添加了我想要的颜色背景颜色，方法是在我自己的 css 文件中添加以下内容。

.icheckbox_square-grey, .iradio_square-grey {
   background-color: white;
}

带有白色背景的 iCheck 单选框

iCheck radiobox with white background

html

css

icheck