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. Oracle expdp数据泵导出，并在文件上附加上日期格式

    一.导出操作的计算机要安装Oracle Client(建议管理员版本) 二.在服务端创建目录 create directory dpdir as '目录'; 三.给目录赋权限 grant read,w ...

  2. HBuilder git使用-分工合作

    1.初始项目的创建 创建好项目,在项目名上右键,Team->共享 完成后,就实现了本地仓库的建立,另外你要注意现在创建的项目所有文件变成了红色,Git Repositories视图列出了相应的本 ...

  3. Javascript高级编程学习笔记（90）—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  4. [Swift]LeetCode963. 最小面积矩形 II | Minimum Area Rectangle II

    Given a set of points in the xy-plane, determine the minimum area of any rectangle formed from these ...

  5. [Swift]LeetCode353. 设计贪吃蛇游戏 $ Design Snake Game

    Design a Snake game that is played on a device with screen size = width x height. Play the game onli ...

  6. knockoutjs 上自己实现的flux

    在knockoutjs 上实现 Flux 单向数据流 状态机,主要解决多个组件之间对数据的耦合问题. 一.其实简单 flux的设计理念和实现方案,很大程度上人借鉴和参考了Vuex的实现,只是简化了某些 ...

  7. IView组件化之部署及按钮学习

    IView是什么? iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. Npm安装IView npm install iview 在main.js中配置I ...

  8. Kafka分区与消费者的关系

    1.  前言 我们知道,生产者发送消息到主题,消费者订阅主题(以消费者组的名义订阅),而主题下是分区,消息是存储在分区中的,所以事实上生产者发送消息到分区,消费者则从分区读取消息,那么,这里问题来了, ...

  9. Ocelot统一权限验证

    Ocelot作为网关,可以用来作统一验证,接上一篇博客,我们继续 前一篇,我们创建了OcelotGateway网关项目,DemoAAPI项目,DemoBAPI项目,为了验证用户并分发Token,现在还 ...

  10. 外接程序 VMDebugger 未能加载或导致了异常 修复

    单击进入 是 visual studio   在 VMWARE 菜单栏上 单击 右键,出现如图,然后选择  自定义(C)...   打开 自定义 工具栏 里 选中 VMware 然后单击 删除 按钮 ...