html+css复刻登录输入框

html+css复刻登录输入框

演示

代码

DOCTYPE html>
<html>

<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 Namelabel>
    div>
body>

html>

你可能感兴趣的:(css,html,css3)