css实现input输入框placeholder上浮动画效果代码

代码语言:html

所属分类:表单美化

代码描述:css实现input输入框placeholder上浮动画效果代码

代码标签: css input 输入框 placeholder上浮 动画

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

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

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

  
  
<style>
:root {
  --bg: rgb(41, 39, 43);
  --white: rgb(190, 190, 190);
  --primary: rgb(50, 206, 154);
  --placeholder: rgb(106, 102, 108);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  background-color: var(--bg);
}

.wrapper {
  width: min(325px,80vw);
  display: grid;
  align-items: center;

  & > * {
    grid-column: 1;
    grid-row: 1;
    font: 1.1rem futura,helvetica,sans-serif;
    color: var(--white);
  }

  & input {
    position: relative;
    border: 1.5px solid var(--white);
    border-radius: 0.25rem;
    outline: none;
    bac.........完整代码请登录后点击上方下载按钮下载查看

网友评论0