带有白色背景的 iCheck 单选框答案

【问题标题】：iCheck radiobox with white background带有白色背景的 iCheck 单选框
【发布时间】：2016-06-07 08:46:13
【问题描述】：

我正在使用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。

【问题讨论】：

你有现场演示吗？
@Frutis 抱歉，我在本地桌面上使用 XAMPP。我无法设置 jFiddle，因为我不知道如何导入 icheck 依赖项。
您可以上传修改后的 blue.png 并将其添加到问题中吗？
@CandyGumdrop 当然我已将其添加到问题中。

标签： html css icheck

【解决方案1】：

更改这些复选框图形的样式比更改这些图像最简单。在 CSS 中使用 radial-gradient 或 border-radius 在 blue.css 中的选择器之后生成一个圆圈可能可以实现类似的效果，但您最好编辑主题本身的图形。

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

这是blue.png 和blue@2x.png，背景与您所做的一样，保留抗锯齿，使用 GIMP。

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

【讨论】：

【解决方案2】：

肯定比更改 png 更简单。

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

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

【讨论】：