<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
form{margin:5em;backface-visibility:hidden;}
.input{float:left;position:relative;margin:10px;}
input{border:1px solid #eee;padding:1em 5em;outline:none;}
lable{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#aaa;transition::all .2s ease;}
:focus+lable{color:#52A5FB;font-size:.65em;top:8%;transform:none;}
</style>
</head>
<body>
<form>
<div class="input">
<input type="text" id="name"/>
<lable for="name">Your Name</lable>
</div>
<div class="input">
<input type="text" id="Address" />
<lable for="Address">Address</lable>
</div>
</form>
</body>
</html>
浮动式标签练习
最新推荐文章于 2022-07-24 17:59:54 发布