WHY

「背景」博客文章支持 - [ ] 渲染为 checkbox，但样式不尽如人意 ↓ （浏览器默认样式，mac 已经不错了，windows 更惨）

原 CheckBox 样式
原 CheckBox 样式

查看 html 代码，如下：

<ul>
  <li><input checked="" disabled="" type="checkbox"> 文章类目大体确定</li>
  <li><input checked="" disabled="" type="checkbox"> 各页部分样式调整</li>
  <li><input disabled="" type="checkbox"> 首页置顶文章优化</li>
   ...
</ul>

通常 input checkbox 优化得有 label 加持从而调整样式（这里并没有），且如何能隐藏父级的 <li> 原点呢？（文章主体中的 li 还是希望能以原点形式呈现的）

HOW

直接上完成后的样子吧 ~

只关注 chrome 的样式 😂，Firefox IE 可能不一样，会丑

现样式
现样式

list-style-type 保留了原有 · ，调整了下颜色，checkbox 做了较大的调整，整体效果本人还是很满意的。

Talk is cheap, show me the code.

.post-warp input[type=checkbox]:checked {
    content: none;
}
.post-warp input[type=checkbox]:disabled {
    box-shadow: -2px -1px 1px 2px #dd5a5e;
    border: none;
    margin: 1px 5px 0 -9px;
    border-radius: 50%;
    -webkit-transform: rotate(10deg)scale(1);
    transform: rotate(10deg)scale(1);
}
.post-warp input[type=checkbox]:checked:after {
    content: "\2713";
    color: #dd5a5e;
    font-weight: bolder;
}
  • 既然改不了父类样式那就藏起来 😏 =》margin-left: -9px
  • 调整 input[type=checkbox]
    • 伪选择器 :disabled 样式（md 文件渲染出来必为 disabled）⭕️ =》border-radius:50%
    • box-shadow 阴影调整为合适的像素
    • checkd:after 选中的勾勾也调整下

Done ~

WHAT

调整其实不难，重点在于思考 =》样式优化的方式之一：改不了，藏起来