web前端入门到实战：纯css实现输入框placeholder动效及输入校验

haohong 2020-01-17

背景

话不多说，我们能否用纯css实现以下效果:

web前端入门到实战：纯css实现输入框placeholder动效及输入校验

答案是肯定的。

借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现，:placeholder-shown伪类目前兼容性如下：

web前端入门到实战：纯css实现输入框placeholder动效及输入校验

直接上代码！

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="input-fill-box">
    <input class="input-fill" placeholder="邮箱" pattern="^[A-Za-z0-9\u4e00-\u9fa5][a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" required>
    <a href="javascript:" class="clear">close</a>
    <label class="input-label">邮箱</label>
</div>
</body>
</html>
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）

css:

.input-fill{
  width: 100%;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  padding: 20px 16px 6px;
  border: 1px solid transparent;
   background: #f5f5fa;
  border-radius:10px;
  transition: border-color .25s;
}
.input-fill:placeholder-shown::placeholder {
    color: transparent;

}
.input-fill-box {
  width: 50%;
    position: relative;
}
.input-label {
    position: absolute;
    left: 16px; top: 14px;
    pointer-events: none;
    color:#BEC1D9;
   padding: 0 2px;
    transform-origin: 0 0;
    pointer-events: none;
    transition: all .25s;
}
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
    transform: scale(0.75) translate(0px, -14px);    
}
.input-fill:focus{
  border: 2px solid #1d31aa;
}

.clear{
  position:absolute;
  top:10px;
  right:-20px;
   display: none;
    transition: all .25s;
}
.input-fill::-ms-clear { display: none; }
.input-fill:not(:placeholder-shown) + .clear { display: inline; }

.input-fill:valid {
 border-color: green;
 box-shadow: inset 5px 0 0 green;
}
.input-fill:not(:placeholder-shown):invalid {
 border-color: red;
 box-shadow: inset 5px 0 0 red;
}
haohong

haohong

相关推荐

多元线性回归问题（Tensorflow 求解）

多元线性回归问题求解使用的数据集是经典的boston房价数据。一共506个数据，后面56个数据我将其划了出来作为测试集。比较的简单，主要是学习步骤与算法。该数据集每一个样本包括12个特征变量和该地区的平均房价。# 选取测试集的第36个数据测试，也可以选择其

JM / 0评论 2020-05-04

【Spring Boot】Spring Boot之整合Apollo配置中心

# 使Apollo的加载顺序放到日志系统加载之前，不过这会导致Apollo的启动过程无法通过日志的方式输出。# 建议在实际使用时尽量给出默认值，以免由于key没有定义导致运行时错误。

haidaoxianzi / 0评论 2020-04-18

【Objective-C】自定义UITextView（placeholder，长按换行，文字位置、文字间距等）

　　1、长按textView弹出换行操作；　　2、自定义文字间距；　　3、为textView添加placeholder文字；UIMenuItem *menuItem = [[UIMenuItem alloc]initWithTitle:@"换行&

81570790 / 0评论 2020-04-16

PlaceHolder（每日Flutter 小部件）

color: Colors.blue, // 设置占位符颜色 defalutBlue Grey 70

szintu / 0评论 2020-03-23

两个有意思的HTML5的tips

今天看到两个不错的HTML5玩意，感觉有意思，分享一下。一个是Placeholder，Placeholder是HTML5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失

攻城师 / 0评论 2013-05-14

tensorflow(三)

一个数据占位符，用于在构建一个算法时留出一个位置，然后在run时填入数据。对于无状态节点，其输出由输入张量和节点操作共同确定，对于有状态节点。如存储节点，其输出还会受到节点内部保存的状态值影响。交互式会话，为用户提供类似shell的交互式编程环境，交互式会

JM / 0评论 2019-12-22

css 修改placeholder样式

input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */

MaureenChen / 0评论 2019-12-14

运用tensorflow写的第一个神经网络

因为实训课要用LSTM+attention机制在钢材领域做一个关系抽取。作为仅仅只学过一点深度学习网络的小白在b站上学习了RNN，LSTM的一些理论知识。于是从图书馆借来《tensoflow实战-----深度学习框架》，在此开始记录我的tensorflow

cherry0 / 0评论 2019-12-13

IE 8 浏览器 placeholder 兼容性处理

由于公司的产品需要兼容 IE8 浏览器，在做登陆时，发现一个问题，placeholder 在input = text 情况下，显示还算正常，但在 input = password 就变成了两个点，百度，gg很多，有的是通过lable 模拟，另外还有通过定位

拭血 / 0评论 2019-11-17

【零基础】使用Tensorflow实现神经网络

　　前面已经逐步从单神经元慢慢“爬”到了神经网络并把常见的优化都逐个解析了，再往前走就是一些实际应用问题，所以在开始实际应用之前还得把“框架”翻出来，因为后面要做的工作需要我们将精力集中在业务而不是网络本身，所以使用框架可以减少非常多的工作量，有了前面自己

hnyzyty / 0评论 2019-11-04

TensorFlow 之tf.placeholder（）

如果没有指定张量打形状，你可。# 定义矩阵乘法运算

JM / 0评论 2019-10-28

纯css实现输入框placeholder动效及输入校验

借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现。<input class="input-fill" placeholder="邮

zyhui / 0评论 2019-09-08

怎么修改placeholder字体的css样式

修改palceholder内文字的css样式::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px;}修改class名为test1的元素palceholder内

wcssdu / 0评论 2017-11-01

修改placeholder字体的css样式

color: red;font-size: 20px;line-height: 50px;color: red;font-size: 20px;line-height: 50px;::-webkit-input-placeholder { /* WebKi

jiedinghui / 0评论 2018-04-03

表单介绍

两者的不同将在后台处理中进行解释。label标签：用来辅助文本输入框，在点击label时可以直接进入文本框。password：密码框，输入的内容均以点显示。只有name相同的checkbox才算是一组信息。通过value来修改按钮的显示文字。placeho

zZoOoOJaVa / 0评论 2018-02-19

spring与mybatis集成 context:property-placeholder加载的配置文件中的属性相关问题

现在没事的时候，就学着集成Spring、Mybatis、Maven。通过这种方式操作数据库时，发生数据库拒绝访问的的错误，要求提供正确密码，并且控制台上打印出的用户名也不是配置文件中配置的用户名。a、工程目录结构如下图b、工程相关配置信息如下图1) mav

MayMatrix / 0评论 2015-01-09

web前端开发中遇到的问题整理(一)

记录开发过程中遇到的问题及通过自己摸索或查阅网上的教程整理出的解决方案，如有不全或者错误欢迎留言更正。input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */. var isAndroid = u.i

hualala / 0评论 2019-07-01

Vue基础之内部指令（上）

v-if、v-else-if、v-else以及v-show条件指令v-if、v-else-if、v-else类似于JavaScript里的if、else-if、else，这三个指令根据表达式的值对DOM/组件进行渲染/销毁。值得注意的是，v-else-if

LiteHeaven / 0评论 2019-06-30

优秀开源库SDWebImage源码浅析

世人都说阅读源代码对于功力的提升是十分显著的, 但是很多的著名开源框架源代码动辄上万行, 复杂度实在太高, 这里只做基础的分析。简洁的接口首先来介绍一下这个 SDWebImage 这个著名开源框架吧, 这个开源框架的主要作用就是:. Asynchronou

mjbaishiyun / 0评论 2019-06-30

# 编写第一个Chrome Extension

Chrome Extension可以加载到Chrome内，通过操纵Chrome浏览器，从而完成一些定制的工作。假设你想要一个功能，它可以在你点击上下文菜单项目时剪贴当前标签的URL和标题的话，这个功能在Chrome本身并不支持，那么就可以通过一个Chrom

HappyBlog / 0评论 2019-06-29

CSS如何修改placeholder样式

项目用经常遇到修改input的placeholder的颜色的需求，这里来看一下placeholder如何用css设置:. 可以发现，placeholder和input的默认颜色是有点区别的。不难发现color属性只能改变输入值的颜色，placeholder

切慕溪水 / 0评论 2019-06-28

修改placeholder字体的css样式

color: red;font-size: 20px;line-height: 50px;color: red;font-size: 20px;line-height: 50px;::-webkit-input-placeholder { /* WebKi

MaureenChen / 0评论 2018-04-03

表单介绍

两者的不同将在后台处理中进行解释。label标签：用来辅助文本输入框，在点击label时可以直接进入文本框。password：密码框，输入的内容均以点显示。只有name相同的checkbox才算是一组信息。通过value来修改按钮的显示文字。placeho

PioneerFan / 0评论 2018-02-20

怎么修改placeholder字体的css样式

修改palceholder内文字的css样式::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px;}修改class名为test1的元素palceholder内

Ydgent / 0评论 2017-11-01

placeholder的兼容处理(jQuery下)

/* ajax请求发现未登录时，服务端返回401错误，然后此处统一处理401错误，跳转到登录页面 */

82500798 / 0评论 2016-10-18

css3 之 修改input 输入框的placeholder 默认样式

::-webkit-input-placeholder { color:#999999; text-align: center;font-size: 15px;font-weight: bold; }. ::-moz-placeholder { color

jiedinghui / 0评论 2016-07-19

解决IE支持placeholder的方法

下面是解决IE支持placeholder的方法本文引用的jquery是1.11.1测试通过，先引用jquery<script type="text/javascript" src="http://code.jquery.

zyb00yaonuli / 0评论 2015-09-03

学习笔记CB013: TensorFlow、TensorBoard、seq2seq

tensorflow基于图结构深度学习框架，内部通过session实现图和计算内核交互。tensorflow基本数学运算用法。sess.close()主要数字运算。tf.matrix_inverse #计算矩阵的逆tensorboard使用。tensorf

zhuzhishi0 / 0评论 2019-06-27

用JavaScript解决Placeholder的IE8兼容问题

HTML5新加的Placeholder属性可以很方便的代替之前用onfocus,onblur的方法，并且比它更强大，可以使用JavaScript来解决IE8兼容问题，在IE8下，自动替换成onfocus方法，在支持HTML5的浏览器中则还是用Placeho

zfszhangyuan / 0评论 2014-10-29

用JavaScript解决Placeholder的IE8兼容问题

HTML5新加的Placeholder属性可以很方便的代替之前用onfocus,onblur的方法，并且比它更强大，可以使用JavaScript来解决IE8兼容问题，在IE8下，自动替换成onfocus方法，在支持HTML5的浏览器中则还是用Placeho

BUAACST / 0评论 2014-10-29

HTML5 placeholder实际应用经验分享及拓展

我们不妨将placeholder来个临时拆分：place + hold + er.placeholder指的就是：“足以镇住这块区占据位置的字符。无论是传统软件或是web应用中，placeholder都是相当常见的。在可输入控件中，“占位符”一般作提示用，

niehanmin / 0评论 2014-09-24

IE 下 jquery form serialize方法bug

因为该input框是输入日期的，placeholder填的是中文提示，后来跟踪发现是由于form.serialize()方法直接将placeholder的值当做输入框的值拼接到参数字符串中了，网上看了很多人也遇到这个问题了，但是没有提供比较好的解决方案，无

卡奇莫多 / 0评论 2014-07-04

placeholder效果的jQuery插件，支持IE6、IE7

为IE添加placeholder支持功能，采用悬浮的span元素方式来模拟placeHolder，一般的，你在不输入的时候，会取到框内的值。此方法就没有这个担忧了。<input type="text" id="userN

EdwardSiCong / 0评论 2013-12-10

Jquery Flot 使用

调用plot函数的方法如下：var plot = $.plot其中placeholder可以是JQuery的对象，DOM元素或者JQuery的表达示，要把完成的图放到这个位置上。placeholder要有宽度和高度。因为plot会修改placeholder

82483564 / 0评论 2013-11-13

HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

着HTML5的深入人心，越来越多的新功能得以应用。HTML5与CSS3相结合可以非常简单的实现很多超酷的效果。本文为您讲解使用HTML5和CSS3打造自动获得焦点、支持语音输入的超酷的搜索框。HTML我们在页面中放置一个搜索表单form，在表单中分别有一个

pythonclass / 0评论 2013-07-05

jQuery模拟placeholder属性

在使用HTML的input元素时，经常会用到placeholder属性。但是IE8不支持这个placeholder属性，有点悲催，只能使用js来模拟这个placeholder了

lining / 0评论 2013-07-03

HTML5在IE下兼容placeholder属性的jquery插件

折腾一下午，总算解决了这个比较蛋疼的问题。结果到ie下面一测，乖乖。不得了，所有的input里面的placeholder等都出不来了。果然都是高手，还有很多类似问题。发现个还算圆满的。这不得不再次感谢我们伟大的互联网啊。function showPassw

publicTIM / 0评论 2013-06-20

两个有意思的HTML5的tips

一个是Placeholder，Placeholder是HTML5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。以前要实现这效果都是用JavaScript来控制才能实

PioneerFan / 0评论 2013-05-14

如何建立一个样式新颖的CSS3搜索框

搜索框大概是web开发中最常用的UI元素之一，我想基本没有必要去介绍如何使用它。无论是网站还是web应用，都会为了增强用户体验而添加它，那么你是不是也想过设计一个别致的搜索框？在今天的文章中，大家将会学到如何使用伪元素来创建一个超酷的CSS3搜索框。当然在

切慕溪水 / 0评论 2013-02-26

使用jquery.uploadify.js报placeholder element错误

这是因为input元素必须有id，并且用id初始化uploadify函数。

摄郎Elements / 0评论 2013-02-07

纯 CSS 实现自适应正方形

在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord 的移动页面：。那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢？方案一：CSS3 vw 单位CSS3 中新增了一组相对于可视区

libowen0 / 0评论 2019-06-21

多行+垂直居中placeholder

<div class="placeholderDiv borderRdaius">请输入您的电子邮箱</div>

别告诉我有Bug / 0评论 2012-12-10

分享两个超棒的帮助你生成占位图片(placeholder image)的在线工具

可能在大家的日常web设计和开发中往往需要使用一些dummy图片，用来生成页面布局效果。今天我们这里介绍两个个人比较喜欢的生成页面dummy图片的在线工具，希望大家喜欢！placehold.it是我个人比较常常的一款生成占位图片的工具，你可以直接引用如下地

wdy00 / 0评论 2012-10-22

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。如果用JS实现，需要监听输入框的change和focus事件，比较麻烦。但是用CSS中的伪类就可以实现相近效果。比如，div可以根据内容自动调

gigipop / 0评论 2019-06-20

Gradle实战：Android多渠道打包方案汇总

《Gradle基本知识点与常用配置》《Gradle实战：不同编译类型的包同设备共存》《Gradle实战：发布aar包到maven仓库》《Gradle实战：执行sql操作hive数据库》。本文将延续之前几篇博客的风格，先从基本概念入手，这有助于我们对后文的理

afa0 / 0评论 2019-06-20

html5新特性--表单input新属性placeholder

placeholder 属性提供一种提示，描述输入域所期待的值。设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。//ff下系统表单样式会被覆盖，因此会改变提示文字的颜色。input { color: red; }如

owhile / 0评论 2012-03-28

html5之placeholder属性

我想大家应该多写过这个placeholder的js的插件，但是今天介绍的是html5的input的一个新的属性。------主要也是发现自己博客的html5相关的文章过少，不!应该是基本没有，但是其实还是看了很多的，所以决定写一些吧。------简单记录，

wangnan0 / 0评论 2011-12-05

跨浏览器的HTML5占位文本(PlaceHolder)方案

跨浏览器的HTML5占位文本方案

努力的zhiyi / 0评论 2011-11-24

TensorFlow——多层 LSTM 通俗易懂版

但是感觉这些例子还是太复杂了，所以这里写了个比较简单的版本，虽然不优雅，但是还是比较容易理解。如果你想了解 LSTM 的原理的话，可以参考我前面翻译的博客：。212. 开始搭建 LSTM 模型，其实普通 RNNs 模型也一样# 把784个点的字符信息还原成

louishao / 0评论 2018-09-04