用純CSS 自定義radio checkbox 樣式

lolomaco 發(fā)布于2019-08-29 12:28 / 2897人閱讀

摘要：以前做自定義樣式的的時候，一直是如下結(jié)構(gòu)文字然后定義的樣式作為新再用做關(guān)聯(lián)。知道今天才知道可以用標簽的屬性做，純真是太不應(yīng)該了，學(xué)東西還是要認真細致點。單選項示例如下效果示例作者

以前做自定義樣式的radio, checkbox 的時候，一直是如下結(jié)構(gòu)

然后定義diyRadio 的樣式作為新Radio, 再用js 做關(guān)聯(lián)。

知道今天才知道可以用標簽的for 屬性 + :checked 做，純CSS
（ 真是太不應(yīng)該了，學(xué)東西還是要認真、細致點。 ）

DIY 單選項示例如下：

/* CSS */
.radio-beauty-container {
  font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
  padding: 2px;
  background-color: green;
  background-clip: content-box;
}
.radio-beauty-container .radio-name {
  vertical-align: middle;
  font-size: 16px;
}
.radio-beauty-container .radio-beauty {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid green;
  vertical-align: middle;
  margin: 0 15px 0 3px;
  border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
  box-shadow: 0 0 7px green;
}

效果：
http://codepen.io/jawil/pen/N...
( 示例作者：jawil(codepen) )