Css：【转】默认的checkbox、input、radio太丑了？我来教你改变使用纯css3改写的带动画的默认样式

发表于 | 更新于 | 分类于 ， | | 热度 ℃
字数统计 1,701 | 阅读时长 8

css：默认的checkbox、input、radio太丑了？我来教你改变使用纯css3改写的带动画的默认样式

img

项目的github地址为： https://github.com/sunshine940326/css3formeledemo 【github已经 fork】
本文首发于我的个人博客，http://cherryblog.site/ ；欢迎大家查看我的其他博客
最近在做公司后台的优化项目，拿到设计稿一看，设计师觉得默认的input、checkbox、radio太丑了，要优化，在做了几个demo之后找到了要怎么优化这些样式的方法，我优化的原则有以下几点：

  • 因为是在已有的项目上做优化，所以尽量在不改变原有结构的基础上进行修改
  • input、checkbox这些大都是表单里面的元素，所以大部分跟后台有交互，保留原有属性，只增加新的class或者id
  • 只使用css3，并且其属性也都是input，当然也可以直接使用img代替，或者用div+span模拟，但是这就不叫做“优化”，而是模仿了。
  • 使用sass，只需要改变参数就可以反复多次使用

思路

大致的原理都是使用html原生的标签元素标签checkbox或者input，在后面加上label标签，将一些原有的元素隐藏，然后再用css设置你想要样式，行为方面都是根据原生属性来判断，不需要使用js。所有的html代码都是

1
2
3
4
div.container
    input type="checkbox" id="checkbox" 
    label for="checkbox"
    div.bottom-line

都是利用css的原生属性来判断用户的操作,先将原本的checkbox隐藏，然后再设置label的样式，最后设置input[type=checkbox]:checked+label的样式

checkbox

checkbox demo1

首先来看一个checkbox，实现这个动画其实很简单，只运用css就可以实现。实现的原理是绑定checkout和label,用label控制是否checked。点击label的时候改变checkbox的属性
先将checkbox隐藏，然后label为一个只有border的框框，使用after和befor伪元素来实现对号的两部分。
先将after和before设置宽度为width0.4，height为0，设置不同的旋转角度，让befor和after合起来刚好是一个对号。然后用css动画设置使其height达到width0.7和width*0.35并控制动画使其连贯播放，

html

1
2
3
4
<div class="cb-container">
    <input type="checkbox" id="checkbox">
    <label for="checkbox" class="cb-label"></label>
</div>

scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
$checked-color: #fff;
$checked-bg:rgb(101,141,181);
$unchecked-color: #cfcece;
$unchecked-bg:rgb(249,249,249);
$checkbox-height: 100px;
$background-color:#fff;
$font-color:#dcdcdc;
$duration: .4s;
.cb-container{
  width: 1000px;
  text-align: center;
  margin-top: 50px;
}
html, body{
  padding:0;
  margin:0;
  background-color: $background-color;
  color:$font-color;
  font-family:'Open Sans';
}
#checkbox{
  display:none;
}
.cb-label{
  height: $checkbox-height;
  width: $checkbox-height;
  background: $unchecked-bg;
  border: $checkbox-height * .1 solid $unchecked-color;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  transition: border-color ease $duration/2;
  -moz-transition: border-color ease $duration/2;
  -o-transition: border-color ease $duration/2;
  -webkit-transition: border-color ease $duration/2;
  cursor: pointer;
  &::before,&::after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: $checkbox-height * 0.2;
    background: $checked-color;
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    content: '';
    -webkit-transition: opacity ease 0.5s;
    -moz-transition: opacity ease 0.5s;
    transition: opacity ease 0.5s;
  }
  &::before{
    top:$checkbox-height * 0.76;
    left: $checkbox-height * 0.31;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  &::after {
    top: $checkbox-height * .45;
    left: $checkbox-height * 0;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
input[type=checkbox]:checked + .cb-label,
.cb-label.checked{
  background: $checked-bg;
  border-color:$checked-bg;
  &::after{
    border-color:$checked-color;
    height: $checkbox-height * .35;
    -moz-animation: dothabottomcheck $duration/2 ease 0s forwards;
    -o-animation: dothabottomcheck $duration/2 ease 0s forwards;
    -webkit-animation: dothabottomcheck $duration/2 ease 0s forwards;
    animation: dothabottomcheck $duration/2 ease 0s forwards;
  }
  &::before{
    border-color:$checked-color;
    height: $checkbox-height * 1;
    -moz-animation: dothatopcheck $duration ease 0s forwards;
    -o-animation: dothatopcheck $duration ease 0s forwards;
    -webkit-animation: dothatopcheck $duration ease 0s forwards;
    animation: dothatopcheck $duration ease 0s forwards;
  }
}
@-moz-keyframes dothabottomcheck{
  0% { height: 0; }
  100% { height: $checkbox-height *0.35; }
}
@-webkit-keyframes dothabottomcheck{
  0% { height: 0; }
  100% { height: $checkbox-height *0.35; }
}
@keyframes dothabottomcheck{
  0% { height: 0; }
  100% { height: $checkbox-height *0.35;  }
}
@keyframes dothatopcheck{
  0% { height: 0; }
  50% { height: 0; }
  100% { height: $checkbox-height * 0.7; }
}
@-webkit-keyframes dothatopcheck{
  0% { height: 0; }
  50% { height: 0; }
  100% { height: $checkbox-height * 0.7; }
}
@-moz-keyframes dothatopcheck{
  0% { height: 0; }
  50% { height: 0; }
  100% { height: $checkbox-height * 0.7; }
}

img

经过改变后的checkbox

checkboxdemo2

img

checkboxdemo2

checkboxdemo3

img

checkboxdemo3

checkboxdemo4

img

checkboxdemo4

input

input的优化源于在掘金上看到的一篇文章，效果着实小清新，于是就使用拿来主义，写了一个简易版的demo，效果如下，运用的是flex布局还有伪元素placeholder来实现的。

img

input效果

  • 输入框清除默认样式

  • 当输入框获得焦点时，输入框原本的文字向上移，并且下方蓝色的线宽度由0变为100

  • 如果没有输入内容，还变为未输入的状态

    ​

    先贴上代码

    html代码

    html结构很简单，使用的是HTML原生的form元素input和label；在效果中的“请输入内容”这几个字不是使用的

    1
    placeholder

    ，而是使用的label，但是也设置有

    1
    placeholder

    ,只不过是把

    1
    placeholder

    的透明度设置为0，因为我们需要根据

    1
    placeholder

    是否显示来设置下方line的宽度和label的位置。

1
2
3
4
div.input-container
    input type="input" id="input" placeholder="请输入内容"
    label for="input"
    div.bottom-line

完整html代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="scss/main.css">
</head>
<body>
<div class="input-container">
    <input type="input" id="input" placeholder="请输入内容">
    <label for="input">请输入内容</label>
    <div class="bottom-line"></div>
</div>
</body>
</html>

css代码

全部的动画效果都只使用了css，但是使用的一些新特性浏览器兼容性还没有那么好，兼容到ie10.布局使用的是flex，动画效果用的是用的transform。运用伪类placeholder判断是否输入了文字，如果输入了文字下方的line宽度变为100%；label中的文字上移并且变小
代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
$width: 500px;
$label-font-color: #3f4f5b;
$label-focus-font-color: rgb(82, 97, 108);
$border-bottom-color: #d5d5d5;
$focus-border-color: rgb(101, 141, 181);
$transform-top: 10px;
$transform-time: 0.3s;
$scale: 0.9;
.input-container {
  width: $width;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-flow: column-reverse;
  flex-flow: column-reverse;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin: 100px auto
}
.input-container input {
  -webkit-box-ordinal-group: 11;
  order: 10;
  -ms-flex-order: 10;
  outline: none;
  border: none;
  width: 100%;
  padding: 10px 0;
  font-size: 20px;
  border-bottom: 1px solid $border-bottom-color;
  text-indent: 10px;
}
.input-container input::-moz-placeholder {
  opacity: 0;
}
.input-container input::-webkit-input-placeholder {
  opacity: 0;
}
.input-container input:-ms-input-placeholder {
  opacity: 0;
}
.input-container input, .input-container label {
  transition: all $transform-time;
}
.input-container label {
  -webkit-box-ordinal-group: 101;
  -ms-flex-order: 100;
  order: 100;
  color: $label-font-color;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: translate(10px, 40px);
  transform: translate(0px, 40px);
}
.input-container .bottom-line {
  order: 2;
  width: 0;
  height: 2px;
  background: $focus-border-color;
  transition: all $transform-time;
}
.input-container input:focus {
  border-bottom-color: #fff;
}
.input-container input:focus ~ div, .input-container input:not(:placeholder-shown) ~ div {
  width: 100%
}
.input-container input:focus + label, .input-container input:not(:placeholder-shown) + label {
  color: $label-focus-font-color;
  -webkit-transform: translate(10px) scale($scale);
  transform: translate(10px) scale($scale)
}

转自 ： https://juejin.im/post/591873170ce4630069f3013d

-------------本文结束感谢您的阅读-------------
如果我的文章让你有收获，请支持一下！
0%