900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html自定义radio样式 用纯CSS 自定义radio checkbox 样式

html自定义radio样式 用纯CSS 自定义radio checkbox 样式

时间:2020-10-26 20:53:50

相关推荐

html自定义radio样式 用纯CSS 自定义radio checkbox 样式

以前做自定义样式的radio, checkbox 的时候,一直是如下结构

文字

然后定义diyRadio 的样式作为新Radio, 再用js 做关联。

知道今天才知道可以用标签的for 属性 + :checked 做,纯CSS

(真是太不应该了,学东西还是要认真、细致点。)

DIY 单选项示例如下:

radio1

radio2

radio3

/* 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;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。