2

I have no experience with checkbox styling. Is there anyway to achieve border radius effect on checkboxes? How can I style checkbox like this image?

enter image description here

heron
  • 3,611
  • 25
  • 80
  • 148

2 Answers2

8

HTML 

<div class="checkbox">  
        <input id="check1" type="checkbox" name="check" value="check1">  
        <label for="check1">Checkbox No. 1</label>  
        <br>  
        <input id="check2" type="checkbox" name="check" value="check2">  
        <label for="check2">Checkbox No. 2</label>  
    </div>

CSS

label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
    margin-bottom: 10px;
}
label:before {
    content:"";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    border-radius: 3px;
}
input[type=checkbox] {
    display: none;
}
input[type=checkbox]:checked + label:before {
    content:"\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 15px;
    color: #f3f3f3;
    text-align: center;
    line-height: 15px;
}

As seen here.

Fiddle

What it should look like in modern browsers. What it should look like

Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
  • http://jsfiddle.net/vGja8/ is the code that you posted. it doesn't give any result similiar to image I posted – heron Sep 24 '13 at 04:50
  • @heron It does. See my added fiddle. I didn't post all the needed CSS thoughn but I added some more. – Bram Vanroy Sep 24 '13 at 04:52
  • Neither past answer nor updated doesn't give anything visually similiar to image I posted. Re-read my question please – heron Sep 24 '13 at 04:54
  • @heron You wanted to style your checkboxes, and add border radius? Well, my code does that. Unless you are looking at the fiddle in an old browser. see my added screenshot. – Bram Vanroy Sep 24 '13 at 05:18
  • http://screencast.com/t/UM6bRdhAj2c I need to achieve this result – heron Sep 24 '13 at 05:19
  • 2
    @heron this gets you very close. You have not shown any efort at solving this yourself. This is a good answer and if you know anything about CSS two or three changes to the CSS will give you exactly what you need. The more effort you put in the more effort we will put in. Don't expect to get something for nothing. – Jon P Sep 24 '13 at 05:28
  • These checkboxes are not tabbable though - right? – Dannyboy Jan 22 '14 at 13:22
  • @Dannyboy They sure are clickable, so I presume they can be used on touch devices as well. It's pure CSS, so it should work I think. – Bram Vanroy Jan 22 '14 at 17:35
2
<div class="square">
<input type="checkbox" value="None" id="square" name="check" />
<label for="square"></label></div>

css3 code:

.square label {
 cursor: pointer;
 position: absolute;
 width: 20px;
 height: 20px;
 left: 4px;
 top: 4px;

 -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 0px white;
 border:1px solid lightblue;

  background: -webkit-linear-gradient(top, white 0%, white 100%);

   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );   }

  .square label:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   content: '';
    position: absolute;
    width: 9px;
     height: 5px;
    background: transparent;
    top: 4px; 
     left: 4px;
      border: 3px solid blue;
      border-top: none;
     border-right: none;

     -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
         transform: rotate(-45deg);  }

 .square input[type=checkbox]:checked + label:after {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
       filter: alpha(opacity=100);
         opacity: 1; }

i am modifying css code...check it

proxyserver
  • 53
  • 8