css如何让浮动的元素占位,纯CSS：点击输入框时，标签（占位符）浮动可见

表单的标签在输入框里，当点击输入框时，标签浮动到输入框的上方，这个表单设计看起来也挺酷的。本文介绍如何使用纯CSS来实现这个效果。

点击输入框时，标签浮动

CSS代码@charset "UTF-8";

/* #################### ################################ #################### */

/* #################### RELEVANT CODE STARTS AT LINE 145 #################### */

/* #################### ################################ #################### */

*,

*::before,

*::after {

margin: 0;

padding: 0;

box-sizing: border-box;

text-decoration: none;

}

html {

position: relative;

overflow-x: hidden;

scroll-behavior: smooth;

background-color: #EDEEE9;

/* #################### ########################### #################### */

/* #################### All form-related CSS below. #################### */

/* #################### ########################### #################### */

}

html body {

background-color: #EDEEE9;

color: #303030;

font-family: "Inter", sans-serif;

min-height: 100vh;

width: 100%;

padding: 2.5vh 10vw;

display: flex;

flex-direction: column;

justify-content: center;

align-items: flex-start;

}

html body h1 {

font-size: clamp(1rem, 6vw, 10rem);

}

html body a {

text-decoration: underline;

color: #303030;

}

html body code {

font-size: 1rem;

padding: 0 0.5rem;

background-color: #D8DBCE;

}

html body .explanation {

width: 100%;

margin-bottom: 15vh;

}

html body .explanation p {

font-size: 1rem;

max-width: 75ch;

margin: 2rem 0;

}

html body .explanation ul:last-child {

margin-bottom: 2rem;

}

html body .explanation ul {

display: flex;

flex-direction: column;

}

html body .explanation ul li {

list-style: none;

position: relative;

margin: 0.5rem 0;

}

html body .explanation ul li::before {

content: "👉";

position: absolute;

top: -0.25rem;

left: -2rem;

}

html body .container {

width: 100%;

max-width: 768px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

padding: 2rem 2rem 1.5rem;

background-color: #D8DBCE;

}

@media (min-width: 768px) {

html body .container {

flex-direction: row;

align-items: center;

}

}

html body .container .cta-form {

margin-bottom: 2rem;

text-align: center;

}

@media (min-width: 768px) {

html body .container .cta-form {

margin-bottom: 0;

margin-right: 2rem;

text-align: left;

}

}

html body .container .cta-form h2 {

font-size: 1.5rem;

width: 100%;

max-width: 25ch;

margin: 0 auto;

text-align: center;

}

@media (min-width: 768px) {

html body .container .cta-form h2 {

text-align: left;

margin: 0;

}

}

html body .container .cta-form p {

margin-top: 1rem;

font-size: 1rem;

width: 100%;

max-width: 24ch;

}

html .form {

align-self: center;

}

html .form__input {

width: clamp(120px, 50vw, 420px);

height: 2.5rem;

padding: 0 1.25rem;

border: 1px solid #303030;

border-radius: 2px;

margin: 0.625rem auto;

transition: all 250ms;

/* When the input field (.form__input) is in focus,

transform the .form__label and change colors*/

/* ALSO, if the input field's placeholder is NOT shown (when the input field has content),

transform the .form__label and change colors. */

/* THIS PART IS IMPORTANT!! */

/* The block below hides the placeholder entirely. */

/* For all intents and purposes, the placeholder no longer exists. */

/* What shows on the input field is only the label*. */

/* HOWEVER, the input fields still recognizes that the placeholder exists!*/

/* The placeholder is just invisible. We need the placeholder to exist for

some weird CSS stuff. If we skip this, we can't make it CSS-only. */

/* When the placeholder is NOT shown,

style the top border. */

/* This makes the top border fade-out when the placeholder disappears. */

}

@media (min-width: 768px) {

html .form__input {

width: clamp(120px, 35vw, 420px);

}

}

html .form__input:focus {

outline: none;

border-top-color: rgba(0, 0, 0, 0.1);

}

html .form__input:focus + .form__label, html .form__input:not(:placeholder-shown) + .form__label {

transform: translateY(-4.5rem) scale(1);

color: #303030;

}

html .form__input::placeholder {

display: none;

color: transparent;

-webkit-user-select: none;

/* Safari */

-ms-user-select: none;

/* IE 10 and IE 11 */

user-select: none;

/* Standard syntax */

}

html .form__input:not(:placeholder-shown) {

border-top-color: rgba(0, 0, 0, 0.5);

}

html .form__label {

font-size: 1rem;

color: #909090;

display: block;

/* Moves the label on TOP of the placeholder */

/* You'll need to change this as needed */

transform: translate(1.25rem, -2.5rem);

transform-origin: 0 0;

/* Used later for transitions */

transition: all 500ms;

-webkit-user-select: none;

/* Safari */

-ms-user-select: none;

/* IE 10 and IE 11 */

user-select: none;

/* Standard syntax */

/* THIS PART IS IMPORTANT! */

/* This line prevents the label from being selected.*/

/* This is crucial because if this line doesn't exist, users can

click on the label, instead of the input field. That's bad UX! */

pointer-events: none;

}

HTML代码

CSS浮动标签

填充表单

查看注释，与表单相关的代码从第 145 行开始。

Name

Email

Subject

代码解释

1、标签的使用原因与占位符(Placeholders )相同，但当文本在输入字段中时不会消失，因为它允许用户始终查看所需的信息。

2、查看注释，与表单相关的代码从第 145 行开始。

3、默认情况下，输入字段在聚焦(focus)时具有轮廓。*

4、占位符(Placeholders )用于向用户显示他们各自的字段中需要哪些信息。

5、占位符(Placeholders )是使用 placeholder="" 属性创建的。

6、默认情况下，当文本填充输入字段时，占位符(Placeholders )会消失。 这会影响 :placeholder-shown 伪选择器。*