Search code examples
htmlcssicheck

iCheck radiobox with white background

I am using iCheck to style my check- and radio boxes. I want to make the background of the radio box white. Currently its transparent and looks like this:

enter image description here

I thought it might be a good idea to edit the blue.png image

enter image description here

and to change the background from transparent to white. But now, the radio box is not smooth round anymore. This is how it looks now:

enter image description here

Is there any simpler/ better way to change the background to white? Do I really need to edit the blue.png?

Here is the code to produce the picture:

<!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>

Edit Here is the modified blue.png

enter image description here

You can download the uncompressed image here.

Solution

  • The simplest to change the style of those checkbox graphics than changing those images. It may be possible to achieve a similar effect in CSS using radial-gradient or border-radius following the selectors in blue.css to produce a circle, but you are better off editing the graphic of the theme itself.

    Your image doesn't look smooth because you filled in the background in such a way that removes antialiasing.

    Here's blue.png and [email protected] with the background filled in as you have done, preserving antialiasing, using GIMP.

    Note that your style is hard to see over a white background.

    blue.png

    blue@2x