首页
前端开发
HTML5
CSS单选按钮与复选框美化实现

CSS单选按钮与复选框美化实现

0 次浏览 0 条评论
zip
zip

单选按钮和复选框的美化只用 CSS 就能搞定？嗯，还真能。而且效果还挺不错，既能保持功能完整，又能让界面看起来更有设计感。

浏览器默认的<input type="radio">和<input type="checkbox">样式实在太朴素了，放在现代页面里有点拉胯。想让它们更贴合页面风格，光改样式还不够，得配合

基本思路其实简单：先把原生控件隐藏，再用:before或:after伪元素画一个“假的”按钮或勾选框。用户点到

input[type="checkbox"], input[type="radio"] {
  display: none;
}


input[type="checkbox"] + label:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  background: #fff;
}


input[type="checkbox"]:checked + label:before {
  background-color: #007BFF;
  border-color: #007BFF;
}

想做得更炫一些？加点transition和@keyframes动画，比如点一下复选框，来个缩放+旋转动画，整个交互会更“有感觉”。

不过注意一点哈：不同浏览器、不同系统，默认样式差异挺大，最好加上-webkit-这类前缀，测一测在 Safari 或老版安卓上是不是也正常。

如果你在做后台管理、表单页面或者想给表单增加点设计感，这招纯 CSS 美化表单控件挺适合用，代码简单、响应快、不依赖 JS，自己玩玩也容易上手。

zip 文件大小：982B