css3简单实现输入框选中酷炫效果

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8 />
<title>Nothing</title>
<style type="text/css">
#post{
    position: relative;
}
span{
    position: absolute;
    left: 0.625rem;
    top: 0;
    pointer-events: none;
    transition: all 0.4s;
}
input:focus + span{
    color: palevioletred;
    transform: scale(0.8);
    background-color: #fff;
    padding: 4px;
    top: -10px;
}
</style>
</head>
<body>
    <div id="post">
        <input type="text" id="txt" />
        <span>郵箱</span>
    </div>
</body>
</html>

 

上一篇:[shardingSphere 使用与场景2] shardingSphere 分库分表配置


下一篇:MVC – 8.Razor 布局