html


 <label>
    <input type="checkbox" class="hidden-input" />
    <span class="your style about checkbox"></span>
    记住我
</label>

 css


 .hidden-input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

input[type=checkbox]+span {
    /* your style goes here */
    display: inline-block;
    height: 1em;
    width: 1em;
    border-radius: 4px;
    background-color: gray;        
}

/* active style goes here */
input[type=checkbox]:checked+span {
    background-color: red;
}

建议你这么做，不需要js，你可以完全自定义你想要的东西。
ps：对于所有长得丑还不让你给它打扮的html元素，你都可以尝试这种方案，哪怕动用js。

把input隐藏，外面套label，再里面加个span，样式写在span上，让label覆盖在span上面，js去改active的class

 <label for="remember" class="text-muted"><span class="circle-btn"></span><input type="radio" id="remember" style="display:none;" />记住密码</label>

 css


 label {
    -webkit-user-select: none;
}
.circle-btn {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    border: 1px solid #808080;
    transition: all 0.4s;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline-block;
    vertical-align: middle;
    margin: -4px 3px 0 0;
}
.circle-btn.active {
    border-width: 5px;
    border-color: #1dace8;
}

其实不用js也可以实现。。不过我还没尝试过

css 设置 width 和 height

现在浏览器都喜欢用 Shadow DOM 之流将这种控件的代码封装起来，如果浏览器不提供 API 的话能做的东西其实比较有限。我搜索了一圈似乎并没有看到有类似的 API，大部分人似乎都是自定义来着。使用 -webkit-appearance 属性可以不显示浏览器给的默认样式，这样我们就可以自己定义空间的样式表了，以下是一个 DEMO： http://runjs.cn/detail/bqnpmle9