モダンCSSの機能でチェックボックスとラジオボタンを装飾してみた

チェックボックスやラジオボタンを装飾したい場合、display:none;で消してdivやspanやjs＋疑似要素で装飾するのが一般的かと思います。
最近はそれをやらなくても、モダンCSSの機能を使って独自のスタイルを実装するテクニックがあります。

以下コピペでチェックボックスとラジオボタンが装飾されるcssです。

@supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}
input[type='checkbox'], input[type='radio'] {
  background: #fff;
  border: .1rem solid #ccc;
  outline: none;
  display: inline-block;
  position: relative;
  top: .2rem;
  margin: 0;
  cursor: pointer;
  -webkit-transition: background .3s, border-color .3s, box-shadow .2s;
  transition: background .3s, border-color .3s, box-shadow .2s;
}
input[type='checkbox']{
    width: 1.6rem;
    height: 1.6rem;
    border: .1rem #ccc solid;
    border-radius: .3rem;
}
input[type='radio'] {
    padding: .4rem;
    border: .1rem #ccc solid;
    border-radius: 50%;
}
input[type='checkbox']:checked {
  background: #00add1;
  border: .1rem solid #00add1;
}
input[type='radio']:checked {
  background: #00add1;
  border: .1rem solid #00add1;
}
input[type='checkbox']:after {
    content: '';
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    width: .3rem;
    height: .9rem;
    border: .2rem solid #fff;
    border-top: 0;
    border-left: 0;
    left: .5rem;
    top: 0px;
    transform: rotate(43deg);
    -webkit-transform: rotate(43deg);
}
input[type='radio']:after {
    content: '';
    display: block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background-color: #fff;
}

HTMLはこんな感じでOKです。

<input type="checkbox" name="c1" id="c1">
<label for="c1">チェックボックス</label>

<input type="radio" name="r1" id="r1">
<label for="r1">ラジオボタン</label>

chromeやFirefoxのモダンブラウザには対応していますが、IEやEDGEにはまだ100%対応していないっぽいです。
cssが一部適応or適応されない感じでした。

参考：最新のCSS機能を備えたカスタムスタイリングフォーム入力