用纯CSS 自定义radio checkbox 样式

lolomaco 发布于2019-08-29 12:28 / 2896人阅读

摘要：以前做自定义样式的的时候，一直是如下结构文字然后定义的样式作为新再用做关联。知道今天才知道可以用标签的属性做，纯真是太不应该了，学东西还是要认真细致点。单选项示例如下效果示例作者

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

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

知道今天才知道可以用标签的for 属性 + :checked 做，纯CSS
（ 真是太不应该了，学东西还是要认真、细致点。 ）

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) )

云服务器 GPU云服务器自定义按钮样式自定义css h5视频播放器可自定义样式 css样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111923.html

用纯CSS美化radio和checkbox

摘要：先看看纯美化过后的和效果查看。项目地址在出现之前，我们美化和需要借助，最具代表性的就是，它功能强大复杂并且主题很多。为了更好的在项目中重用，我把美化的代码写成一个项目，叫，寓意像魔法一样去美化和。 Radio和checkbox需要美化吗？答案是必须的，因为设计风格一直都会变化，原生的样式百年不变肯定满足不了需求。先看看纯CSS美化过后的radio和checkbox效果：查看。项目地...

Donne 2019-08-19 17:37 评论0 收藏0
用纯CSS美化radio和checkbox

摘要：先看看纯美化过后的和效果查看。项目地址在出现之前，我们美化和需要借助，最具代表性的就是，它功能强大复杂并且主题很多。为了更好的在项目中重用，我把美化的代码写成一个项目，叫，寓意像魔法一样去美化和。 Radio和checkbox需要美化吗？答案是必须的，因为设计风格一直都会变化，原生的样式百年不变肯定满足不了需求。先看看纯CSS美化过后的radio和checkbox效果：查看。项目地...

terro 2019-08-30 12:47 评论0 收藏0
用纯CSS美化radio和checkbox

摘要：先看看纯美化过后的和效果查看。项目地址在出现之前，我们美化和需要借助，最具代表性的就是，它功能强大复杂并且主题很多。为了更好的在项目中重用，我把美化的代码写成一个项目，叫，寓意像魔法一样去美化和。 Radio和checkbox需要美化吗？答案是必须的，因为设计风格一直都会变化，原生的样式百年不变肯定满足不了需求。先看看纯CSS美化过后的radio和checkbox效果：查看。项目地...

rubyshen 2019-08-01 15:04 评论0 收藏0
用纯css改变默认的radio和checkbox的样式

摘要：利用的的伪类代替和效果优点需要图片来调整选中前和选中后的样式，纯搞定缺点兼容性，以下不支持在线例子改变默认的和的样式单选框男女多选框苹果橙子代码改变默认的和的样式单选框男女多选框苹果橙子利用css的label的伪类（::before）代替checkbox和radio效果：优点：需要图片来调整选中前和选中后的样式，纯css搞定缺点：兼容性，IE8以下不支持在线例子: ...

CoderBear 2019-04-23 13:31 评论0 收藏0