Divcss5小编给大家介绍一款投入框的代码，实现如下：

！声明文档类型

html lang='en '

头

meta charset='UTF-8 '

标题表单/title

style type='text/css '。输入字段，输入字段*{

-web kit-box-size : border-box；

盒子大小：边框盒子；

}。输入字段{

相对位置：

宽度： 200 px

margin: 20px 50px

}。输入字段输入{

背景色：透明；

border:无

边界半径： 0;

高度： 35px

宽度： ;

padd : 0；

框影：无；

outline:无；

-web kit-transit : all 0.3s；

transition:全0.3s

}。输入字段输入范围

位置：

前：名；

左： 0；

显示器：内联块；

更大宽度： ;

z-index : 0；

宽度： ;

高度： 1px

边框-底部： 1px实心# d9d 9；

}。输入字段span:after {

内容： " "；

位置：

底部： 0；

左： 0；

宽度： ;

高度： 2px

背景# 2196f3

-webkit-transform:秤(0);

变压器：标度(0);

-网络套件-transit : all。2s易出；

公交：全。2s易出；

}。输入字段输入：焦点跨度：后{

-webkit-transform:秤(1);

变压器：比例尺(1);

}。input-field.input-field-icon i{

位置：值；

右：0

前：50%；

padding:0 5px

font-size :1.5 em

-web kit-transform : translate(0，-50%)；

transform: translate(0，-50%)；

}。输入字段。输入-字段-图标输入{

填充-右侧：30像素；

}。输入字段。成功输入跨度

border-color : # b5 DFB 7；

}。input-field.warning输入span{

边框颜色： # ffd 699

}。输入字段。错误输入跨度

边框颜色： # fccb 7；

}。输入字段。成功跨度：之后{

背景： # 4 caf 50

}。输入-field.warning span:after{

背景# ffc107

}。输入-field.error span:after{

背景# f44336

}。输入字段。输入字段图标。成功

color : # 4 caf 50

}。输入字段。输入字段图标。警告我

color: # ffc107

}。输入字段。输入字段图标。错误I {

颜色： # f44336

}。输入字段。线性跨度：后

背景：-网络套件-线性-梯度(左，#8C0044 20%，#00FFFF 50%，# 7700 ff 80%)；

}

/style

/head

身体

div class='input-field '

输入id='last_name '类型='text '占位符='账号'

跨度/跨度

/div

div class=' input-field success input-field-icon '

输入id='last_name '类型='text '占位符='账号'

跨度/跨度

i class='ion-android-done'/i

/div

' div class='输入字段警告输入字段图标'

输入id='last_name '类型='text '占位符='账号'

跨度/跨度

离子警报循环

/div

' div class='输入字段错误输入字段图标'

输入id='last_name '类型='text '占位符='账号'

跨度/跨度

i class='ion-android-close'/i

/div

' div class='输入字段线性'

输入id='last_name '类型='text '占位符='账号'

跨度/跨度

/div

/body

/html