看看这样的input框如何

探花
探花 发布于 7 天前 浏览:1277 类型:原创 - 随笔 分类:HTML/CSS - css 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
	<style type="text/css">
		.input-field,
.input-field *{
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}
.input-field {
	position: relative;
	width: 200px;
	margin: 20px 50px;
}

.input-field input {
	background-color: transparent;
	border: none;
	border-radius: 0;
	height: 35px;
	width: 100%;
	padding: 0;
	box-shadow: none;
	outline: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.input-field input+span {
	position: absolute;
	top: 100%;
	left: 0;
	display: inline-block;
	max-width: 100%;
	z-index: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #d9d9d9;
}

.input-field span:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #2196f3;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all .2s ease-out;
	transition: all .2s ease-out;
}
.input-field input:focus+span:after {
	-webkit-transform: scale(1);
	transform: scale(1);
}
.input-field.input-field-icon i{
	position:absolute;
	right:0;
	top:50%;
	padding:0 5px;
	font-size:1.5em;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
.input-field.input-field-icon input{
	padding-right:30px;
}

.input-field.success input+span{
	border-color: #b5dfb7;
}
.input-field.warning input+span{
	border-color: #ffd699;
}
.input-field.error input+span{
	border-color: #fccbc7;
}
.input-field.success span:after {
	background:#4caf50;
}
.input-field.warning span:after{
	background:#ffc107;
}
.input-field.error span:after{
	background:#f44336;
}
.input-field.input-field-icon.success i{
	color: #4caf50;
}
.input-field.input-field-icon.warning i{
	color: #ffc107;
}
.input-field.input-field-icon.error i{
	color: #f44336;
}

.input-field.linear span:after {
	background:-webkit-linear-gradient(left, #8C0044 20%, #00FFFF 50%, #7700FF 80%);
}
	</style>
</head>
<body>
	<div class="input-field">
		<input id="last_name" type="text" placeholder="账号">
		<span></span>
	</div>
	<div class="input-field success input-field-icon">
		<input id="last_name" type="text" placeholder="账号">
		<span></span>
		<i class="ion-android-done"></i>
	</div>
	<div class="input-field warning input-field-icon">
		<input id="last_name" type="text" placeholder="账号">
		<span></span>
		<i class="ion-alert-circled"></i>
	</div>
	<div class="input-field error input-field-icon">
		<input id="last_name" type="text" placeholder="账号">
		<span></span>
		<i class="ion-android-close"></i>
	</div>
	
	<div class="input-field linear">
		<input id="last_name" type="text" placeholder="账号">
		<span></span>
	</div>
	
</body>
</html>
标签:
z
给个赞 32 人点赞
收藏 64 人收藏
评论 已有 18 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
探花
探花前天 20:5318F
网上那么多答案,你看看不就知道了 //@李小帅:怎么解决双边距问题 //@探花:你想问什么,直接问好了 //@李小帅:作者可以加个扣扣吗 //@探花:都是css又没有js还要注释啊emoticon //@李小帅:就是没注释啊,作者
举报 支持 (0) 回复 (0)
李小帅
李小帅前天 18:5117F
怎么解决双边距问题 //@探花:你想问什么,直接问好了 //@李小帅:作者可以加个扣扣吗 //@探花:都是css又没有js还要注释啊emoticon //@李小帅:就是没注释啊,作者
举报 支持 (0) 回复 (1)
探花
探花前天 17:1916F
你想问什么,直接问好了 //@李小帅:作者可以加个扣扣吗 //@探花:都是css又没有js还要注释啊emoticon //@李小帅:就是没注释啊,作者
举报 支持 (0) 回复 (1)
探花
探花前天 17:1815F
聪明 //@清歌飞翔:input:focus //@仕女狂:为什么呢? //@探花:嗯哼 //@仕女狂:鼠标获取焦点,就能使span的after出现?
举报 支持 (0) 回复 (0)
清歌飞翔
清歌飞翔前天 16:5214F
input:focus //@仕女狂:为什么呢? //@探花:嗯哼 //@仕女狂:鼠标获取焦点,就能使span的after出现?
举报 支持 (0) 回复 (1)
仕女狂
仕女狂前天 15:4513F
为什么呢? //@探花:嗯哼 //@仕女狂:鼠标获取焦点,就能使span的after出现?
举报 支持 (0) 回复 (1)
李小帅
李小帅前天 13:2612F
作者可以加个扣扣吗 //@探花:都是css又没有js还要注释啊emoticon //@李小帅:就是没注释啊,作者
举报 支持 (0) 回复 (1)
探花
探花前天 13:2011F
都是css又没有js还要注释啊emoticon //@李小帅:就是没注释啊,作者
举报 支持 (0) 回复 (1)
探花
探花前天 13:2010F
嗯哼 //@仕女狂:鼠标获取焦点,就能使span的after出现?
举报 支持 (0) 回复 (1)
李小帅
李小帅前天 11:199F
就是没注释啊,作者
举报 支持 (0) 回复 (1)
仕女狂
仕女狂3 天前8F
鼠标获取焦点,就能使span的after出现?
举报 支持 (0) 回复 (1)
fantasyna
fantasyna5 天前7F
漂亮啊
举报 支持 (0) 回复 (0)
羡世
羡世6 天前6F
帅气
举报 支持 (0) 回复 (0)
qq229450012
qq2294500126 天前5F
漂亮
举报 支持 (0) 回复 (0)
zhangyufeng
zhangyufeng6 天前4F
收藏收藏
举报 支持 (0) 回复 (0)
探花 探花 作者

你努力并不可怕,可怕的是比你聪明的人还比你努力

作者最新