css+div实现placeholder点击上移酷黑表单效果代码

代码语言:html

所属分类:表单美化

代码描述:css+div实现placeholder点击上移酷黑表单效果代码

代码标签: css div placeholder 点击 上移 酷黑 表单

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

<!DOCTYPE html>
<html lang="en">

<head>
   
<meta charset="UTF-8">




   
<style>
        body {
          align-items: center;
          background-color: #000;
          display: flex;
          justify-content: center;
          height: 100vh;
        }
       
        .form {
          background-color: #15172b;
          border-radius: 20px;
          box-sizing: border-box;
          height: 500px;
          padding: 20px;
          width: 320px;
        }
       
        .title {
          color: #eee;
          font-family: sans-serif;
          font-size: 36px;
          font-weight: 600;
          margin-top: 30px;
        }
       
        .subtitle {
          color: #eee;
          font-family: sans-serif;
          font-size: 16px;
          font-weight: 600;
          margin-top: 10px;
        }
       
        .input-container {
          height: 50px;
          position: relative;
          width: 100%;
        }
       
        .ic1 {
          margin-top: 40px;
        }
       
        .ic2 {
          margin-top: 30px;
        }
       
        .input {
          background-color: #303245;
          border-radius: 12px;
          border: 0;
          box-sizing: border-box;
          color: #eee;
          font-size: 18px;
          height: 100%;
          outline: 0;
          padding: 4px 20px 0;
          width: 100%;
        }
       
        .cut {
          background-color: #.........完整代码请登录后点击上方下载按钮下载查看

网友评论0