利用 :placeholder-shown 选择器实现 label 浮动效果
设计师似乎喜欢用 浮动 label 模式 来设计华丽的效果,虽然我不确定我是否百分百喜欢这种方式,但我忍不住快速实现了一个这样的 demo。这个版本用上了一些我最近才看见的现代 CSS 表单样式技巧,特别是 :placeholder-shown
选择器。
先说重点:不管从形状或者形式上,这都不是一种最佳实践。这个 demo 的实现适用于某些浏览器的较新版本 - 尤其是 Chrome/Opera 和 Safari/WebKit。但它在 Firefox 上运行得一塌糊涂。要注意了,我可几乎没有测试过它。
我主要是参考了下面这些技巧来实现该效果的:
- Flexbox — 借助 Hugo Giraudel 的示例代码 ,在 HTML 中,把 label 放在了 input 之后,并通过 CSS 颠倒其显示顺序。
- 使用
transform
属性,把 label 移至 input 之上。当 input 处于激活状态的时候,placeholder 的文字被设置为opacity: 0
,也就是透明,这样 label 和 placeholder 的文本不会重叠。 - 当 placeholder 不 显示,比如表单域被填充或者获得焦点的时候,才把 label 上移,这里我是受到了 Jeremy 关于 ”Pseudon’t” 的文章 启发。
最后一点正是将我这个实现与 Chris Coyier 和 Jonathan Snook 的示例区分开来的地方,后两者均使用了 :valid
伪类。我认爲我这个 demo 背后有特定的局限性,但正如我一开始所讲,对于浏览器支持总是会有限制的。
译注:
:placeholder-shown
属于尚未发行的 CSS4 规范,查询 Can I Use 可以得知,迄今为止只有 Chrome (>=47)、Safari (>=9)、Opera (>=35)、Android Browser (>=47) 和 Chrome for Android (>=47) 这五种浏览器支持:placeholder-shown
伪类。作者在这里提及的局限性应该就是指浏览器对:placeholder-shown
的支持度。
这个版本改用了 :placeholder-shown
伪类,但不仅仅是在 placeholder 文本不显示时移动 label 的位置 - 在该模型预设的工作方式中 :placeholder-shown
伪类发挥着很好的作用。
这里是相关 HTML 代码:
<div class="field"><input type="text" placeholder="Jane Appleseed"><label for="fullname">Name</label> </div>
...以及 CSS 代码:
/** * 把区域设置为 flex 容器,并逆序排列,使得 label 标签显示在上方 */ .field {display: flex;flex-flow: column-reverse; } /** * 给 label 和 input 设置一个过渡属性 */ label, input {transition: all 0.2s; }input {font-size: 1.5em;border: 0;border-bottom: 1px solid #ccc; } /** * 设置 input 获得焦点时的边框样式 */ input:focus {outline: 0;border-bottom: 1px solid #666; } /** * 1\. 标签应保持在一行内,并最多占据字段 2/3 的长度,以确保其比例合适且不会出现换行。 * 2\. 修正光标形状,使用户知道这里可以输入. * 3\. 把标签往下平移并放大1.5倍,使其覆盖 placeholder 层. */ label {/* [1] */max-width: 66.66%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;/* |2] */cursor: text;/* [3 */transform-origin: left bottom; transform: translate(0, 2.125rem) scale(1.5); } /** * 默认情况下,placeholder 应该是透明的,并且应该继承 transition 属性。 */ ::-webkit-input-placeholder {transition: inherit;opacity: 0; } /** * 在 input 获得焦点时,显示 placeholder 内容。 */ input:focus::-webkit-input-placeholder {opacity: 1; } /** * 1\. 当元素获取焦点时,还原 transform 效果,把 label 移回原来的位置。 * 并且,当 placeholder 不显示,比如用户已经输入了内容时,也作同样处理。 * 2\. ...并把光标设置为指针形状。 */ input:not(:placeholder-shown) + label, input:focus + label {transform: translate(0, 0) scale(1); /* [1] */cursor: pointer; /* [2] */ }
2016-01-26 更新: 我更新了 label 的选择器,以便其对应的 input 标签拥有 :placeholder-shown 伪类时,才使用 label 的 transform 效果。那样的话,不支持的浏览器就回退到 “正常模式” ,也就是标签显示在 input 上方。
利用 :placeholder-shown 选择器实现 label 浮动效果相关推荐
- 表单浮动(input+label)效果
系列文章目录 第一章 利用HTML+CSS选择器实现定位及浮动 目录 前言 一.浮动(float)是什么? 二.CSS Position(定位) 三.页面实现步骤 1.HTML代码 2.CSS代码 总 ...
- 2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
- DL之BigGAN:利用BigGAN算法实现超强炸天效果——画风的确skr、skr、skr,太特么的skr了
DL之BigGAN:利用BigGAN算法实现超强炸天效果--画风的确skr.skr.skr,太特么的skr了 导读 本博主刚刚利用代码进行测试,结果的确吊(不)炸(可)天(思议)!BigGAN ...
- html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
- php动态字体,利用纯CSS实现动态的文字效果实例
相信大家都曾在网站中看到过中效果,一打开页面,无论是文字还是图片,都随着规定时间的而变化,今天我们将介绍如何通过用纯CSS来实现这种效果,下面一起来看看. 大家可能经常会看到酷炫的网站 在这类网站中能 ...
- 创新实训-python爬虫多线程|解决中文乱码问题|卡片向上浮动效果|图文切换
创新实训-python爬虫多线程|乱码问题|前端样式重新修改 考完毛概,把上周的工作总结一下.爬虫在第一周的时候只爬了一个就业指导这一个模块,这一次又加了招聘服务模块,所以就用了两个线程.前端首页一开 ...
- Qt中按钮图标的设置、按钮按下时浮动效果设置 以及 QT的EXE程序图标设置
本文内容皆为Qt 5.13版本. 使用 IDE为 QTCreator.若是 VS+QT插件环境则可能有略微差异. 推荐一个不错的图标网站,大部分资源都可以免费下载: https://www.easyi ...
- android js 开屏动画,利用Flutter实现“孔雀开屏”的动画效果
前言 今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果 不知道这种效果大家叫什么名字?如果有更合适的名字可以在 ...
- 利用API函数实现图像淡入淡出效果(VB)
利用API函数实现图像淡入淡出效果 一般传统的实现两个PictureBox之间图像的淡入淡出效果都需要使用大量的API函数并进行复杂的调色板以及 绘图设备(Device Context)的操作 ...
最新文章
- MFC之CAsyncSocket详解
- LeetCode 1104. 二叉树寻路(数学位运算)
- J2EEd 13个规范
- 【图像处理】基于matlab GUI数字图像处理【含Matlab源码 652期】
- java 定时任务注解
- fbx格式转gif_FBX文件打开工具
- 微信小程序实现垂直tab标签页的切换及动态的选中下划线移动-纵向
- word中怎样输入 包含 真包含 不等于 等集合符号
- Java:使用Java调用打印机进行打印(JPG、PDF和Word三种文件格式)
- JS学习笔记之内置对象 4.21
- 什么是下一代防火墙NGFW(Next Generation Firewall)?
- python输出空心等腰三角形_python学习,打印等腰直角三角形 实心正方形空心正方形...
- 尝试用Unity还原蔚蓝(Celeste)—— 真·操控、移动、手感篇
- 利用python在网上接单赚钱,兼职也能月入过万,赶紧学起来!
- 哪些人不适合吃山药?
- 背压(Backpressure)机制
- 关于小白如何查看自己的文章是否被EI检索
- 【其他】快速注册stackoverflow
- 客户满意度测评模型-层次分析法模型」
- 动态规划问题之求解数列中递增数列的长度
热门文章
- linux中pthread_join()与pthread_detach()详解
- C语言实现:输入一串字符把里面的A、a字符替换成C输出
- UART0串口编程(六):串口(UART0)之UC/OS(二)UC/OS下的串口接收任务编程
- 以太坊(Ethereum ETH)是如何计算难度的
- springboot自动配置流程
- spring:注解@Resource,实现引用类型的赋值
- 站长们都会,但是都会写错的robots!
- 9月份国外最佳WordPress主机提供商Top12
- 【JavaScript 学习笔记】创建对象
- 《Java程序员,上班那点事儿》书名的由来