css实现input输入框点击label标签上浮效果代码-html代码-BFW代码库

css实现input输入框点击label标签上浮效果代码

代码语言：html

代码描述：css实现input输入框点击label标签上浮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,500&display=swap');
        
        *, *:after, *:before {
            box-sizing: border-box;
        }
        :root {
            font-family: 'Poppins', sans-serif;
          /* font sizes will be relative to this */
            font-size: 2rem;
            font-weight: 200;
        }
        body {
            margin: 0;
            padding: 0;
            display: grid;
            grid-gap: 1.5rem;
            place-content: center;
            min-height: 100vh;
            border: 10px solid;
            background-color: #F3D060;
        }
        
        input[type="text"]:focus {
          outline: .3rem ridge #0003;
          outline-offset: 0.25rem;
        }
        
        input[type="text"] {
          position: relative;
          font-wight: 100;
          font-size: 1.2rem;
          border: 0;
          background-color: transparent;
        }
        .form-field {
          position: relative;
          display: inline-block;
          border: 1px solid #0003;
          border-radius: 0.3em;
          padding: 0.3rem;
          background-color: inherit;
          transition: 200ms ease;
        }
        .form-field > input[type="text"]:placeholder-shown + label {
.........完整代码请登录后点击上方下载按钮下载查看