https://wisdmlabs.com/blog/create-adaptive-placeholders-using-css/

https://circleci.com/blog/adaptive-placeholders/

https://stackoverflow.com/questions/47983822/css-operator-adaptive-placeholder-contact-form-7-wordpress

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Adaptive Placeholder – 自适应的占位符效果</title> 

    <style type="text/css">

    body {

    background-color: #FAFAFA;

}

.top-banner {

  background: #555;

}

input[type=text] {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  width: 100%;

  height: -webkit-calc(3em + 2px);

  height: calc(3em + 2px);

  margin: 0 0 1em;

  padding: 1em;

  border: 1px solid #cccccc;

  border-radius: 1.5em;

  background: #fff;

  resize: none;

  outline: none;

}

input[type=text][required]:focus {

  border-color: #00bafa;

}

input[type=text][required]:focus + label[placeholder]:before {

  color: #00bafa;

}

input[type=text][required]:focus + label[placeholder]:before, input[type=text][required]:valid + label[placeholder]:before {

  -webkit-transition-duration: .2s;

  transition-duration: .2s;

  -webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);

  -ms-transform: translate(0, -1.5em) scale(0.9, 0.9);

  transform: translate(0, -1.5em) scale(0.9, 0.9);

}

input[type=text][required]:invalid + label[placeholder][alt]:before {

  content: attr(alt);

}

input[type=text][required] + label[placeholder] {

  display: block;

  pointer-events: none;

  line-height: 2.3em;

  margin-top: -webkit-calc(-3em - 2px);

  margin-top: calc(-3em - 2px);

  margin-bottom: -webkit-calc((3em - 1em) + 2px);

  margin-bottom: calc((3em - 1em) + 2px);

}

input[type=text][required] + label[placeholder]:before {

  content: attr(placeholder);

  display: inline-block;

  margin: 0 -webkit-calc(1em + 2px);

  margin: 0 calc(1em + 2px);

  padding: 0 2px;

  color: #898989;

  white-space: nowrap;

  -webkit-transition: 0.3s ease-in-out;

  transition: 0.3s ease-in-out;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));

  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);

  background-image: linear-gradient(to bottom, #ffffff, #ffffff);

  -webkit-background-size: 100% 5px;

  background-size: 100% 5px;

  background-repeat: no-repeat;

  background-position: center;

}

    *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}

.clearfix{*zoom:1}

.fl{float:left}

.fr{float:right}

.fl,.fr{_display:inline}

.top-banner {

	position:absolute;

	z-index: 999;

	left:0;

	top:0;

	height:40px;

	line-height:40px;

	padding:0 30px;

	width:100%;

	font-size: 13px;

	background-color: rgba(255, 255, 255, 0.15);

	color: #fff;

	font-family: "宋体","Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;

	font-size: 15px;

	/*text-shadow: 1px 1px 3px #333;*/

	/*box-shadow: 0 1px 0 #999;*/

}

.top-banner a {

	color: #fff;

	text-decoration: none;

}

    </style>

   <script type="text/javascript">

$(function() {

    $("input[id$=address]").qtip({

        content: '涂聚文告诉你，好样的'

    });

});

</script>

</head>

<body>

    <div style="width:400px;height:100px;margin:300px auto">

        <form>

            <input required='必须填写' type='text' class="name" id="name">

            <label alt='请输入姓名' placeholder='姓名'></label>

            <input required='必须填写' type='text' class="address" id="address">

            <label alt='请输入地址' placeholder='地址'></label>

        </form>

    </div>

<div class="footer-banner" style="width:728px; margin:200px auto 0"></div>

<script src="js/jquery.min.js"></script>

</body>

</html>

　　

Adaptive Placeholders的更多相关文章

  1. 移动端web自适应解决方案： adaptive.js

    代码有更新,最好直接查看github github:https://github.com/finance-sh/adaptive adaptivejs利用rem解决移动端页面开发的自适应问题 页面模板 ...

  2. 【Win 10应用开发】Adaptive磁贴模板的XML文档结构

    在若干天之前,老周给大家讲了Adaptive Toast通知的XML模板,所以相应地,今天老周给大家介绍一下Adaptive磁贴的新XML模板. 同样道理,你依旧可以使用8.1时候的磁贴模板,在win ...

  3. [MySQL] Buffer Pool Adaptive Flush

    Buffer Pool Adaptive Flush 在MySQL的帮助文档中Tuning InnoDB Buffer Pool Flushing提到, innodb_adaptive_flushin ...

  4. Adaptive Placeholder – 自适应的占位符效果

    在早期,我们都是通过使用 JavaScript 来实现占位符功能.而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能.这里向大家分享一个自适应的占位符 ...

  5. Adaptive Backgrounds – jQuery 自适应背景插件

    Adaptive Backgrounds 是一款很特别的 jQuery 插件,可以从图像中提取主导颜色并将它应用到它的父元素.这个插件利用 Canvas 元素和 ImageData 对象.需要注意的是 ...

  6. Adaptive Code Via C#读书笔记

    原书链接: http://www.amazon.com/Adaptive-Code-via-principles-Developer-ebook/dp/B00OCLLYTY/ref=dp_kinw_s ...

  7. Win 10 开发中Adaptive磁贴模板的XML文档结构，Win10 应用开发中自适应Toast通知的XML文档结构

    分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...

  8. Correlation Filter in Visual Tracking系列一：Visual Object Tracking using Adaptive Correlation Filters 论文笔记

    Visual Object Tracking using Adaptive Correlation Filters 一文发表于2010的CVPR上,是笔者所知的第一篇将correlation filt ...

  9. [Notes] Reading Notes on [Adaptive Robot Control – mxautomation J. Braumann 2015]

    Reading sources: 1.Johannes Braumann, Sigrid Brell-Cokcan, Adaptive Robot Control (ARC  ) Note: buil ...

随机推荐

  1. FCC（ES6写法） Map the Debris

    返回一个数组,其内容是把原数组中对应元素的平均海拔转换成其对应的轨道周期. 原数组中会包含格式化的对象内容,像这样 {name: 'name', avgAlt: avgAlt}. 思路: 直接使用公式 ...

  2. 别以为真懂Openstack: 虚拟机创建的50个步骤和100个知识点(1)

    还是先上图吧,无图无真相 别以为真懂Openstack!先别着急骂我,我也没有说我真懂Openstack 我其实很想弄懂Openstack,然而从哪里下手呢?作为程序员,第一个想法当然是代码,Code ...

  3. 轻量级C#网络通信组件StriveEngine —— C/S通信开源demo（附源码）

    前段时间,有几个研究ESFramework网络通讯框架的朋友对我说,ESFramework有点庞大,对于他们目前的项目来说有点“杀鸡用牛刀”的意思,因为他们的项目不需要文件传送.不需要P2P.不存在好 ...

  4. Centos7-驱动小米WIFI做AP

    参考文章: http://blog.csdn.net/sumang_87/article/details/38168877 http://blog.csdn.net/hktkfly6/article/ ...

  5. 高德地图JS API获取经纬度，根据经纬度获取城市

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Batch入门教程丨第一章：部署与Hello World!（下）

    在上期分享的内容中,我们已经掌握了基础理论知识,今天我们将继续了解和学习与Windows Batch有关的知识和编程方法,如何编写和运行Windows Batch程序,脚本语言的入门方式等,从而能够更 ...

  7. [Swift]LeetCode528. 按权重随机选择 | Random Pick with Weight

    Given an array w of positive integers, where w[i] describes the weight of index i, write a function  ...

  8. [Swift]LeetCode720. 词典中最长的单词 | Longest Word in Dictionary

    Given a list of strings words representing an English Dictionary, find the longest word in words tha ...

  9. Spring Boot 最核心的 25 个注解，都是干货！

    学习和应用 Spring Boot 有一些时间了,你们对 Spring Boot 注解了解有多少呢?今天栈长我给大家整理了 Spring Boot 最核心的 25 个注解,都是干货! 你所需具备的基础 ...

  10. .NET Core实战项目之CMS 第十章 设计篇-系统开发框架设计

    这两天比较忙,周末也在加班,所以更新的就慢了一点,不过没关系,今天我们就进行千呼万唤的系统开发框架的设计.不知道上篇关于架构设计的文章大家有没有阅读,如果阅读后相信一定对架构设计有了更近一部的理解,如 ...