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. QEMU KVM Libvirt手册(7): 硬件虚拟化

    在openstack中,如果我们启动一个虚拟机,我们会看到非常复杂的参数 qemu-system-x86_64 -enable-kvm -name instance-00000024 -S -mach ...

  2. .NET Standard 2.0正式发布了

    亦可赛艇 前天(2017年8月14日),.NET Standard 2.0正式版终于发布了,与之相配套的.NET Core 2.0也同时正式发布,真是令人振奋. 详情请看:https://blogs. ...

  3. php.ini中文翻译版--转载

    ;;;;;;;; ; 警告 ; ;;;;;;;;;;; ; 此配置文件是对于新安装的PHP的默认设置. ; 默认情况下,PHP使用此配置文件安装 ; 此配置针对开发目的,并且*不是*针对生产环境 ; ...

  4. Java实现递增数组的二分查找

    package com.algorithm; import java.util.ArrayList;import java.util.List; /** * 类功能描述: * * @author Ba ...

  5. Trie树详解及其应用

    一.知识简介        最近在看字符串算法了,其中字典树.AC自动机和后缀树的应用是最广泛的了,下面将会重点介绍下这几个算法的应用.      字典树(Trie)可以保存一些字符串->值的对 ...

  6. [Swift]LeetCode134. 加油站 | Gas Station

    There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...

  7. [Swift]LeetCode447. 回旋镖的数量 | Number of Boomerangs

    Given n points in the plane that are all pairwise distinct, a "boomerang" is a tuple of po ...

  8. Python面试真题第四节

    81.举例说明SQL注入和解决办法 82.s="info:xiaoZhang 33 shandong",用正则切分字符串输出['info', 'xiaoZhang', '33', ...

  9. 非对称加密技术中，iFace [ 爱妃链 ]人脸密钥技术排名第三，将弥补区块链现有不足

    最近,区块链领域,出现了一个比较热门技术的讨论,人脸密钥技术,可能大家还对这个名词感到很陌生,但是熟悉加密技术的技术大牛可能一听就能够明白大体的意思了,但是也正是这一熟悉而陌生的技术名词,掀起了区块链 ...

  10. Python--（爬虫与数据库的连接）

    (每一天都是属于你的!) Python对于初学后巩固基础的人还是更多的来接触python爬虫会更好一些,在Python爬虫中包含很多基础部分知识,并且在项目中会提升你的成功感!加油! 我在工作之余时间 ...