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

栏目: CSS3 · 发布时间: 8年前

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

项目的github地址为： https://github.com/sunshine940326/css3formeledemo

本文首发于我的个人博客， http://cherryblog.site/ ；欢迎大家查看我的其他博文

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

最近在做公司后台的优化项目，拿到设计稿一看，设计师觉得默认的input、checkbox、radio太丑了，要优化，在做了几个demo之后找到了要怎么优化这些样式的方法，我优化的原则有以下几点：

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

#思路

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

感兴趣的同学可以下载github项目，我也可以将代码增加的博文中，需要的同学请留言，因为怕全是代码影响阅读`

checkbox

checkbox demo1

首先来看一个checkbox，实现这个动画其实很简单，只运用css就可以实现。实现的原理是绑定checkout和label,用label控制是否checked。点击label的时候改变checkbox的属性

先将checkbox隐藏，然后label为一个只有border的框框，使用after和befor伪元素来实现对号的两部分。

先将after和before设置宽度为width

0.4，height为0，设置不同的旋转角度，让befor和after合起来刚好是一个对号。

然后用css动画设置使其height达到width

0.7和width*0.35并控制动画使其连贯播放，

checkboxdemo2

checkboxdemo3

checkboxdemo4

input

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

输入框清除默认样式
当输入框获得焦点时，输入框原本的文字向上移，并且下方蓝色的线宽度由0变为100
如果没有输入内容，还变为未输入的状态
先贴上代码
html代码
html结构很简单，使用的是HTML原生的form元素input和label；在效果中的“请输入内容”这几个字不是使用的 placeholder ，而是使用的label，但是也设置有 placeholder ,只不过是把 placeholder 的透明度设置为0，因为我们需要根据 placeholder 是否显示来设置下方line的宽度和label的位置。

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

完整html代码如下

<!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中的文字上移并且变小

代码如下:

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Hit Refresh

Satya Nadella、Greg Shaw / HarperBusiness / 2017-9-26 / USD 20.37

Hit Refresh is about individual change, about the transformation happening inside of Microsoft and the technology that will soon impact all of our lives—the arrival of the most exciting and disruptive......一起来看看《Hit Refresh》这本书的介绍吧!

码农工具