漂亮的checkbox 

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<style type="text/css">
  
.checkbox {
    display: none;
}

.label:before {
    display: block;
    content: "";
    margin: 0 .5em 0 0;
    float: left;
    width: 20px;
    height: 20px;
    background-color: green;
    border: 1px solid ;
    -webkit-border-radius: 50%; /* Safari 和 Chrome */   

}
.checkbox:checked + .label:before {
    color: white;
    content: "✓";
}

</style>

<body>
<input id="sample-checkbox" class="checkbox" type="checkbox">
<label class="label" for="sample-checkbox">

Click me

  </label>
</body>
</html>

原文地址：

http://modernweb.com/2014/07/30/5-things-wont-believe-built-css/

posted @ 2015-11-18 11:57  wind90  阅读(315)  评论(0)  编辑  收藏  举报