免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style>
.input-control-c{
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
position: relative;
border-bottom: 1px solid #d0d0d5;
}
.input-control-c:after {
content: '';
position: absolute;
border-bottom: 2px solid #2486ff;
left: 0;
right: 0;
bottom: -1px;
transform: scaleX(0);
transition: transform .25s;
}
.input-control-c:focus-within:after {
transform: scaleX(1);
}
.input-control {
margin: 0;
font-size: 16px;
line-height: 1.5;
outline: none;
padding: 20px 16px 6px;
border: 1px solid transparent;
background: #f5f5f5;
}
.input-control::placeholder {
color: transparent;
}
.input-label {
position: absolute;
font-size: 16px;
line-height: 1.5;
left: 16px;
top: 14px;
color: #a2a9b6;
padding: 0 2px;
transform-origin: 0 0;
pointer-events: none;
transition: all .25s;
}
.input-control:focus~.input-label
{
color: #2486ff;
transform: scale(0.75) translate(-2px, -14px);
}
</style>
<body>
<div class="input-control-c">
<input class="input-control" placeholder="邮箱">
<label class="input-label">邮箱</label>
</div>
</body>
</html>
