html+css复刻登录输入框

最新推荐文章于 2024-04-30 15:11:52 发布

程序员阿诺斯

最新推荐文章于 2024-04-30 15:11:52 发布

阅读量274

点赞数

文章标签： css html css3

itcyy

本文链接：https://blog.csdn.net/weixin_52534218/article/details/129887979

版权

html+css复刻登录输入框

演示

代码

<!DOCTYPE html>
<html>
<!--
    *Material文本框
    *作者：程序员阿诺斯
    *时间：2023-3-5 0：50
-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Material文本框</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,body {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .form-item {
        width: 300px;
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-bottom: 1px solid #bbb7b7;
    }

    #userName {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        color: #dbdcdf;
    }

    .bar {
        display: block;
        margin: 0 auto;
        width: 0;
        height: 2px;
        background-color: #5264ae;
        transition: 0.4s ease;
    }

    label {
        font-size: 26px;
        position: absolute;
        top: -7px;
        left: 0;
        transition: 0.4s ease;
    }

    .form-item input:focus~.bar {
        width: 100%;
    }

    .form-item input:valid~label {
        color: #5264ae;
        transform: translateY(-30px);
    }

    .form-item input:focus~label {
        color: #5264ae;
        transform: translateY(-30px);
    }
</style>

<body>
    <div class="form-item">
        <input type="text" required id="userName">
        <span class="bar"></span>
        <label for="userName"> User Name</label>
    </div>
</body>

</html>