CSS中的复选框(checkbox)是一个很常见的表单组件,但是默认的样式却很难看。为了美化复选框,我们可以使用CSS样式来将方框复选框变成圆形的复选框。input[type= checkbox ]
CSS中的复选框(checkbox)是一个很常见的表单组件,但是默认的样式却很难看。为了美化复选框,我们可以使用CSS样式来将方框复选框变成圆形的复选框。
input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ccc; outline: none; cursor: pointer; transition: all 0.3s ease-in-out; } input[type="checkbox"]:checked { background-color: #2196f3; border-color: #2196f3; }
代码解释:
input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; // 去除默认样式 width: 20px; height: 20px; border-radius: 50%; // 定义圆形样式 border: 2px solid #ccc; outline: none; // 定义边框样式 cursor: pointer; transition: all 0.3s ease-in-out; // 添加过渡动画 } input[type="checkbox"]:checked { background-color: #2196f3; border-color: #2196f3; // 添加选中状态样式 }
最终效果如下:
![checkbox-circular.png](https://i.loli.net/2021/12/01/Zcbh1HaVjKXDvs9.png)现在你已经知道了如何将方框复选框变成圆形的复选框,是不是美观了很多呢?
粉丝
0
关注
0
收藏
0