css3实现的简单表单网站内容验证表达式

浏览:819 发布日期:2018年08月16日分类:系统代码

ionicons.min.css是作为一个图片样式文件远程调用的,如果不调用这个文件那么是否正确也看不出来了所以记得要把代码引用上或者为了保险稳妥点直接本地化
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3表单输入框动画特效 </title>

<style>
html,
body {
background-color: #F4F4F4;
display: flex;
width: 100%;
height: 100%;
align-items: center;
font-family: "Work Sans", sans-serif;
justify-content: center;
}

.exp-container {
width: 100%;
padding: 30px;
box-sizing: border-box;
max-width: 600px;
}

.exp {
display: flex;
flex-direction: column-reverse;
width: 100%;
margin-bottom: 30px;
position: relative;
flex-wrap: wrap;
}

.exp__label {
transition: 0.3s;
margin-bottom: 5px;
}

.exp__label:before {
content: attr(data-icon);
font-weight: normal;
font-family: "Ionicons";
font-size: 24px;
position: absolute;
left: 0;
transform: rotateY(90deg);
bottom: 0;
height: 52px;
background: transparent;
color: #000;
transform-origin: left;
display: flex;
align-items: center;
justify-content: center;
transition: color .3s 0s ease, transform .3s 0s ease;
width: 42px;
}

.exp__input {
border: 1px solid #ddd;
padding: 0 10px;
width: 100%;
height: 52px;
transition: 0.3s;
font-weight: normal;
box-sizing: border-box;
font-family: "Work Sans", sans-serif;
outline: none;
}

.exp__input:focus {
padding-left: 42px;
border-color: #bbb;
}

.exp__input:focus + label:before {
transform: rotateY(0deg);
}

.exp__input:valid {
padding-left: 42px;
border-color: green;
}

.exp__input:valid + label {
color: green;
}

.exp__input:valid + label:before {
transform: rotateY(0deg);
color: green;
font-size: 34px;
content: attr(data-icon-ok);
}

.exp-title {
text-align: center;
font-size: 22px;
margin-bottom: 30px;
font-weight: normal;
}

.exp-title span {
display: inline-block;
padding: 5px;
font-size: 22px;
background: #feffd4;
}
</style>
</head>
<body>


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

<div class="exp-container">
<h2 class="exp-title">使用 :CSS3中的验证选择器</h2>
<div class="exp">
<input type="text" class="exp__input" id="example" name="test" placeholder="Full Name" required>
<label class="exp__label" for="example" data-icon="" data-icon-ok="">Full Name</label>
</div>
<div class="exp">
<input type="email" class="exp__input" id="example2" name="test" placeholder="Email" required>
<label class="exp__label" for="example2" data-icon="" data-icon-ok="">Email</label>
</div>
</div>
原文地址 http://www.daimabiji.com/articlecss/186.html
</body>
</html>

评论() 相关

后面还有条评论,

您需要登录后才可以评论登录 | 立即注册

xtwlkj9999 10-25
ThinkPHP在线客服系统 Ai智能客服系统在线客服源码
fatie 03-29
安全私密的聊天系统可免费使用可转让可定制
dingji 03-23
2022最完备原生电商多端发布支持源码及定制
fatie 03-17
安全私密的聊天系统可免费使用可转让可定制
springblog 01-15
springboot后台管理系统|springboot在线商城购物系统

收藏

赞

hungchia

积分:46 等级:LV0

热点推荐

(追記) (追記ここまで)

最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。