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. SimpleRpc-客户端与服务端工作模型探讨

    前言 本篇文章讲述客户端与服务端的具体设计细节.有细心的小伙伴发现,客户端和服务端的工作方式不一样:服务端是多线程计算模型,利用工作线程完成数据的读取,而客户端是单线程(利用Reactor线程完成数据 ...

  2. 实战深度学习（上）OpenCV库

    在如今人工智能的浪潮下,无数模拟机器学习和深度学习的开发者工具倍出,其中在计算机图形学和计算机视觉里面最流行的一个库就是OpenCV库了.计算机图形学和计算机视觉学在我们的自动驾驶和仿生机器人当中有着 ...

  3. [Swift]LeetCode397. 整数替换 | Integer Replacement

    Given a positive integer n and you can do operations as follow: If n is even, replace n with n/2. If ...

  4. [Swift]LeetCode454. 四数相加 II | 4Sum II

    Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l)there are such th ...

  5. Nginx 动静分离与负载均衡的实现

    一.前提 企业中,随着用户的增长,数据量也几乎成几何增长,数据越来越大,随之也就出现了各种应用的瓶颈问题. 问题出现了,我们就得想办法解决,一般网站环境,均会使用LAMP或者LNMP,而我们对于网站环 ...

  6. 微信小程序自动化测试实践

    由于腾讯系QQ.微信等都是基于腾讯自研X5内核,不是google原生webview(其实就是进行了二次定制).实质上也是混合应用的一种,现在很多app产品也开始流行采用X5内核作为其内嵌web浏览服务 ...

  7. Asp.net Core 使用Jenkins + Dockor 实现持续集成、自动化部署（三）：搭建jenkins集群环境

    写在前面 大家可以看到本文的配图,左边是jenkins单机环境,右边是jenkins集群.个中区别,不言而喻,形象生动. 前面我分别介绍了.net core 程序的多种部署方式(无绝对孰优孰劣): 1 ...

  8. JVM（二）Java虚拟机组成详解

    导读:详细而深入的总结,是对知识"豁然开朗"之后的"刻骨铭心",想忘记都难. Java虚拟机(Java Virtual Machine)下文简称jvm,上一篇我 ...

  9. Zuul上实现限流（spring-cloud-zuul-ratelimit）

    简述 Spring Cloud Zuul RateLimit项目Github地址: https://github.com/marcosbarbero/spring-cloud-zuul-ratelim ...

  10. CSS中层叠和CSS的7阶层叠水平（上篇）

    今天搜索资料时,忽然发现了以前没注意的一个知识点,所以拖过来搞一搞,这个知识点叫做CSS的7阶层叠水平 在说这个知识之前,我们必须要先了解一个东西以便于我们更好的理解CSS的7阶层叠水平 这个东西就是 ...