效果图:
代码展示
< el- form: model= "form" : rules= "rules" ref= "fromList" : hide- required- asterisk= "true" > < el- form- item prop= "account" > < div class = "input-data" > < el- input required= "" v- model= "form.account" autocomplete= "on" > < / el- input> < label> 手机号/ 邮箱< / label> < / div> < / el- form- item> < el- form- item prop= "pass" > < div class = "input-data" > < el- input required= "" v- model= "form.pass" autocomplete= "on" > < / el- input> < label> 密码< / label> < / div> < / el- form- item>
< el- form> . input- data{ width : 100 % ; height : 40px; position : relative;
} : deep ( . el- form) { . el- form- item{ margin- bottom: 62px; } . el- form- item__error{ font- size: 14px; color : #F15151 ; line- height: 1.7 ; letter- spacing: 1px; } . el- input__inner{ padding : 0 ; color : #FFFFFF ; width : 100 % ; height : 40px; border : none; border- radius: 0 ; border- bottom: 1px solid silver; font- size: 16px; background : transparent; } . is- required. is- error . el- input__inner{ border : none ! important; border- bottom: 1px solid #FFFFFF ! important; } . input- data{ label{ font- size: 16px; font- weight: normal; color : #FFFFFF ; letter- spacing: 1px; position : absolute; bottom : 0 ; left : 0 ; pointer- events: none; transition : all 0 . 3s ease; } . el- input: has ( > input: focus) ~ label, . el- input: has ( > input: valid) ~ label{ transform : translateY ( - 30px) ; font- size: 13px ; } } }