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

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

内容简介: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并控制动画使其连贯播放,
css:默认的 checkbox、input、radio 太丑了?我来教你改变使用纯 css3 改写的带动画的默认样式
经过改变后的checkbox

checkboxdemo2

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

checkboxdemo3

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

checkboxdemo4

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

input

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

css:默认的 checkbox、input、radio 太丑了?我来教你改变使用纯 css3 改写的带动画的默认样式
input效果
  • 输入框清除默认样式
  • 当输入框获得焦点时,输入框原本的文字向上移,并且下方蓝色的线宽度由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)
}

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

查看所有标签

猜你喜欢:

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

数据库系统概念

数据库系统概念

(美)Abraham Silberschatz、(美)Henry F.Korth、(美)S.Sudarshan / 杨冬青、李红燕、唐世渭 / 机械工业出版社 / 2012-3 / 99.00元

【编辑推荐】 数据库领域的殿堂级作品 夯实数据库理论基础,增强数据库技术内功的必备之选 对深入理解数据库,深入研究数据库,深入操作数据库都具有极强的指导作用! 【内容简介】 本书是数据库系统方面的经典教材之一,其内容由浅入深,既包含数据库系统基本概念,又反映数据库技术新进展。它被国际上许多著名大学所采用,包括斯坦福大学、耶鲁大学、得克萨斯大学、康奈尔大学、伊利诺伊大学......一起来看看 《数据库系统概念》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

随机密码生成器
随机密码生成器

多种字符组合密码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具