纯CSS方法美化一个单选按钮/复选框

2020-01-14 本文已影响0人 CondorHero

纯CSS方法美化一个单选按钮/复选框

看见了吧，前面那个小单选按钮，UI 小姐姐画的还是很好看的，看看我们前端用到了什么技术。

很明显这个小东西是使用 HTML 原生的 radio 和 CheckBox 来实现的，原生的单选按钮/复选框样式如下：

原生单选按钮和复选框

写项目的时候看了看 element-ui 和 View UI（十月份之前还叫 iview 来，改名了。。。）有没有可以直接使用的组件，结果都没有可以直接拿来就用的。那没办法了，要么借助插件，要么手写，插件可以使用 pretty checkbox 来实现。

A pure CSS library to beautify checkbox and radio buttons

这个插件好呀，插件效果是茫茫的多，但是为了个小功能就用个插件有点杀鸡焉用牛刀的感觉，算了，还是自己来吧。不就写点 css 吗。 come on 反正年底了，划划水了，走起。

看下实现效果：

纯CSS方法美化一个单选按钮/复选框

源代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>纯CSS方法美化一个单选按钮/复选框</title>
    <style>
        body{
            margin: 100px 100px;
        }
        .checkbox:checked {
            background:#E29F00;
        }
        .checkbox {
            -webkit-appearance:none;
            -moz-appearance:none;
            outline: none;
            width:20px;
            height:20px;
            background-color:#ffffff;
            border:solid 1px #dddddd;
            border-radius:50%;
            margin:0;
            padding:0;
            position:relative;
            display:inline-block;
            /*文字对齐方式*/
            vertical-align:top;
            transition:background-color ease 0.1s;
        }
        .checkbox:checked::after {
            content:'';
            top:3px;
            left:3px;
            position:absolute;
            border:#fff solid 2px;
            border-top:none;
            border-right:none;
            height:6px;
            width:10px;
            transform:rotate(-45deg);
        }
    </style>
</head>
<body>
    <input type="checkbox" class="checkbox">
</body>
</html>

实现思路：

第一比较重要的 CSS 属性 appearance ，但是所有主流浏览器都不支持 appearance 属性，使用的时候必须加浏览器前缀。Firefox 支持替代的 -moz-appearance 属性，Safari 和 Chrome 支持替代的 -webkit-appearance 属性。其主要作用是去除系统默认的样式，appearance 常用于 IOS 下移除原生样式，如果用在复选框上，复选框就会直接消失，这时复选框的样式就能自定义样式了。

做个试验，页面放置一个复选框：

<input type="checkbox" class="box">

给复选框添加 -webkit-appearance: none; 这一条样式，复选框消失，标志着此时复选框的默认样式被去除，可以自定义样式了，不然你没办法去用 css 去操作 checkbox 的样式。

这时候设置以下样式我们就能得到个圆：

.box{
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid red;
}

但此时这个东西有个缺点，看动图演示：

动图演示

我们去点击会默认出现外边框，圆外区域点击下才能消失，这个很好理解，input 为 text 的时候，作为输入框，输入框会有失焦聚焦的效果，而且 checkbox 说到底也是 input 所以也会有这个效果，只要我们在加上一条 css 语句就行了。

outline: none;//去除默认外边框

这时候就差一个背景变色和对号显示了√。这个就太简单了，选中的时候使用x:checked 来设置选中的样式。里面的对号就是一个正方形只显示了两条边，然后通过 transform:rotate() 旋转四十五度达到的效果，这个用伪元素来实现就行了。

你肯定有个疑问能不能使用 radio 来替代 checkbox ？
答案是最好不要，因为如果只有一个 radio 标签，一旦选中就不能取消了,单选的切换只能是最少两个以上的相同 name 的标签，只能通过刷新页面来恢复初始页面。

既然都写到这里了，我们就试着模仿一下 pretty checkbox 里面的东西，比如下面这个图示例子：

这个心还可以放大缩小，一些炫酷的效果就可以使用 animation 来实现。可见没什么难的只要有百度，上源代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>纯CSS方法美化一个单选按钮/复选框</title>
    <style>
        body{
            margin: 100px 100px;
        }
        .checkbox {
            -webkit-appearance:none;
            -moz-appearance:none;
            outline: none;
            width:20px;
            height:20px;
            background-color:#ffffff;
            border:solid 1px #dddddd;
            border-radius:50%;
            margin:0;
            padding:0;
            position:relative;
            display:inline-block;
            /*文字对齐方式*/
            vertical-align:top;
            transition:background-color ease 0.5s;
        }
        .checkbox:checked::after,.checkbox:checked::before{
            content: "";
            position: absolute;
            width: 8px;
            height: 12px;
            top:3px;
            left:3px;
            border-radius: 5px 5px 0 0;
            background-color: red;
        }
        .checkbox:checked::after{
            transform: rotate(-45deg);
        }
        .checkbox:checked::before{
            left: 5.8px;
            transform: rotate(45deg);
        }
</style>
</head>
<body>
<input type="checkbox" class="checkbox" name="radio">
</body>
</html>

比較常見的還有一個叉，順便也寫出來了，上面的 ♥ 我們都給畫出來了，這個 ×就比較簡單了，正好兩個僞元素（正負）旋轉45度角。

送上源代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>纯CSS方法美化一个单选按钮/复选框</title>
    <style>
        body{
            margin: 100px 100px;
        }
        .checkbox:checked {
            background:#5cb85c;
        }
        .checkbox {
            -webkit-appearance:none;
            -moz-appearance:none;
            outline: none;
            width:20px;
            height:20px;
            background-color:#ffffff;
            border:solid 1px #dddddd;
            border-radius:50%;
            margin:0;
            padding:0;
            position:relative;
            display:inline-block;
            /*文字对齐方式*/
            vertical-align:top;
            transition:background-color ease 0.1s;
        }
        .checkbox:checked::after,.checkbox:checked::before {
            content:'';
            position:absolute;
            height:2px;
            width:15px;
            left: 1.5px;
            top: 8px;
            background-color: #ffffff;
        }
        .checkbox:checked::after{
            transform: rotate(-45deg);
        }
        .checkbox:checked::before {
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <input type="checkbox" class="checkbox">
</body>
</html>

写作时间 2020-01-17 20:47

补充于2020年2月28日 21点19分

这次主要是讨论下为什么单选单选按钮/复选框 不能直接通过 CSS 样式自定义，非要通过appearance 去除默认样式才能自定义？

我们根据元素在布局时是否换行把 HTML 标签分为块级元素和内联元素。典型的标签就是 div 和 span。如果根据是否具有可替换内容，我们也可以把元素分为替换元素和非替换元素。

替换元素，顾名思义，内容可以被替换。举个典型的例子：

<img src="1.jpg">

如果我们把上面的1.jpg换成2.jpg，图片就被替换了，这种通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此，<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>都是典型的替换元素。

替换元素除了内容可替换这一特性以外，其中还有一个重要的特性。就是内容的外观不受页面上的CSS的影响。用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观？需要类似appearance属性，或者浏览器自身暴露的一些样式接口，例如::-ms-check{}可以更改高版本IE浏览器下单复选框的内间距、背景色等样式，但是直接input[type='checkbox']{}却无法更改内间距、背景色等样式。

总结：复选框属于 input 标签是可替换的元素，需要类似appearance属性才能修改样式。

参考张鑫旭的「CSS 世界」。

纯CSS方法美化一个单选按钮/复选框

猜你喜欢

热点阅读