html表单占位符,HTML5 输入表单动效 - 占位符上浮
CSS
语言:
CSSSCSS
确定
@import url(http://fonts.googleapis.com/css?family=Raleway:200,500,700,800);
@import url(https://fonts.googleapis.com/css?family=Lato);
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background: #111;
font-weight: 500;
font-size: 1.05em;
font-family: 'Raleway', Arial, sans-serif;
}
#container {
position: absolute;
width: 710px;
height: 5em;
left: 50%;
top: 50%;
margin-left: -355px;
margin-top: -2.5em;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
.input {
position: relative;
margin: 1em;
width: calc(50% - 2em);
height: 80px;
}
.message {
width: calc(100% - 2em);
height: 200px;
}
textarea {
border: none;
resize: none;
}
.input__field {
position: absolute;
margin: 0.8em 0;
padding: 0.4em;
width: 100%;
height: calc(100% - 1.6em);
border: none;
border-radius: 0;
background: transparent;
color: #fc0;
font-size: 1.55em;
/* for box shadows to show on iOS */
font-weight: bold;
-webkit-appearance: none;
}
.input__field:focus {
outline: none;
}
.input__label {
position: absolute;
padding: 0 1em;
margin: 1.2em 0;
width: 100%;
height: calc(100% - 2.4em);
color: #6a7989;
font-weight: bold;
font-size: 70.25%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.input__label-content {
position: relative;
display: block;
padding: 1.5em 0;
width: 100%;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.input__label::before,
.input__label:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #6a7989;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.input__label::before {
top: 0;
}
.input__label::after {
bottom: 0;
}
.input__field:focus + .input__label .input__label-content,
.input--filled .input__label-content {
-webkit-transform: translate3d(0, -90%, 0);
transform: translate3d(0, -90%, 0);
}
.input__field:focus + .input__label::before,
.input--filled .input__label::before {
-webkit-transform: translate3d(0, -0.5em, 0);
transform: translate3d(0, -0.5em, 0);
}
.input__field:focus + .input__label::after,
.input--filled .input__label::after {
-webkit-transform: translate3d(0, 0.5em, 0);
transform: translate3d(0, 0.5em, 0);
}
#send-button {
width: 200px;
height: 60px;
background-color: #6a7989;
color: #000;
border: 0;
font-weight: bold;
font-size: 70.25%;
text-transform: uppercase;
letter-spacing: 4px;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
#send-button:hover,
#send-button:focus {
outline: 0;
background-color: #fc0;
color: #000;
-webkit-transition: -webkit-transform 0.3s;
/*☝ NOTHING TO BE SEEN HERE ☝*/
transition: transform 0.3s;
}
@font-face {
font-family: 'Lato';
}
.footer {
position: absolute;
color: grey;
font-family: Lato;
text-align: right;
font-size: 8px;
right: 30px;
bottom: 15px;
}
html表单占位符,HTML5 输入表单动效 - 占位符上浮相关推荐
- html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...
- html5表单地区元素,html5新增表单域元素及属性
1.新增表单元素 在之前的HTML表单标签中,对于一些功能支持的不够好,比如:文本框提示信息.表单校验.日期选择控件.颜色选择控件.范围控件.进度条.标签跨表单等功能.(早期是通过js和dom元素配合 ...
- excel数据表单_Excel中的工作表数据输入表单
excel数据表单 With a bit of programming, you can make it easy for users to enter data in an Excel workbo ...
- Web开发——HTML基础(HTML表单/下拉列表/多行输入)
参考: 参考:http://www.w3school.com.cn/html/html_forms.asp 目录: 1.<form> 元素 1.1 <input> 元素(输入属 ...
- HTML表单标签和HTML5新标签
[HTML表单标签和HTML5新标签] 目录 [HTML表单标签和HTML5新标签] 1. HTML表单标签 1.1input 控件 1.2.label标签 1.3.textarea控件 1.4.下拉 ...
- HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性
HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页: ...
- HTML5新增表单属性(HTML5)
HTML5新增表单属性(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...
- 表单验证:文字输入不超过8个汉字或者16个字符
表单验证:文字输入不超过8个汉字或者16个字符,允许混合输入 方法:利用字符串的replace方法,用正则表达式将汉字替换为两个字符,计算总字符数是否大于16 这里的'01'代表两个字符,可以是00, ...
- PHP 表单处理和用户输入
目录 PHP 中的 $_GET 和 $_POST 变量用于检索表单中的信息,比如用户输入. PHP 表单处理: welcome.php 文件代码: 通过浏览器访问演示如下: PHP 获取下拉菜单的数据 ...
最新文章
- jquery 添加 padding_【开发小技巧】11—如何使用JavaScript / jQuery为网站创夜间/高亮模式?...
- 贝索斯专访:亚马逊帝国大规模业务转型的秘诀
- Redis 从入门到起飞(上)
- 数据中心的“芯”竞争
- 洛谷P2866 [USACO06NOV]糟糕的一天Bad Hair Day(单调栈)
- AlexNet结构详解(引用MrGiovanni博士)
- 幻像类型提高了编译时的安全性
- 简单的封装axios 不包含状态码和提示
- Javascript实现简单的选项卡
- 学计算机编程会秃头吗,编程真的容易导致秃顶么?
- 状压DP【洛谷P1896】 [SCOI2005]互不侵犯
- sqlite配置下载安装教程
- 影片剪辑app android,猫饼剪辑app
- 各大开源软件下载网址
- cipher加密解密
- 2022化工自动化控制仪表考试试题及模拟考试
- SSD固态盘已坏的数据就恢复不了吗?
- excel整列动态联动下拉_在Excel下拉列表中显示多列
- ps图片拖不进去_ps不能直接把图片拖进去怎么办
- Docker私有仓库搭建笔记(四)
热门文章
- 这家总资产排名第一的银行,为什么叫“小”摩?
- SQL Server 2012 开发新特性:文件表
- linux查找出全部doc文件,linux 查找出包含某个字符串的所有文件的方法详解
- Mysql 数据库字符集转换及版本升级/降级的详细教程
- 孙宏斌,真的押上了全部身家?
- 小米12 Ultra或将在5月发布:依旧为骁龙8移动平台
- “征信修复”可信吗?企查查显示信用修复相关企业超1.7万家
- 宁畅定制算力为冰雪训练插上智慧翅膀
- 企业微信与微信互通能力再升级 全面打通与视频号的连接
- 特斯拉上海超级工厂汽车年产量已达到45万辆