卡卡網(wǎng)

表單的標(biāo)簽在輸入框里，當(dāng)點(diǎn)擊輸入框時(shí)，標(biāo)簽浮動(dòng)到輸入框的上方，這個(gè)表單設(shè)計(jì)看起來(lái)也挺酷的。本文介紹如何使用純CSS來(lái)實(shí)現(xiàn)這個(gè)效果。

點(diǎn)擊輸入框時(shí)，標(biāo)簽浮動(dòng)

demodownload

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代碼

<h1>CSS浮動(dòng)標(biāo)簽</h1>
  <div class="container">
    <div class="cta-form">
      <h2>填充表單</h2> 
    <p>查看注釋?zhuān)c表單相關(guān)的代碼從第 145 行開(kāi)始。</p>
    </div>
    <form action="" class="form">
      
      <input type="text" placeholder="Name" class="form__input" id="name" />
      <label for="name" class="form__label">Name</label>

      <input type="email" placeholder="Email" class="form__input" id="email" />
      <label for="email" class="form__label">Email</label>

      <input type="text" placeholder="Subject" class="form__input" id="subject" />
      <label for="subject" class="form__label">Subject</label>
      
    </form>
  </div>

execcodegetcode

代碼解釋

1、標(biāo)簽的使用原因與占位符（Placeholders ）相同，但當(dāng)文本在輸入字段中時(shí)不會(huì)消失，因?yàn)樗试S用戶(hù)始終查看所需的信息。

2、查看注釋?zhuān)c表單相關(guān)的代碼從第 145 行開(kāi)始。

3、默認(rèn)情況下，輸入字段在聚焦（focus）時(shí)具有輪廓。*

4、占位符（Placeholders ）用于向用戶(hù)顯示他們各自的字段中需要哪些信息。

5、占位符（Placeholders ）是使用 placeholder="" 屬性創(chuàng)建的。

6、默認(rèn)情況下，當(dāng)文本填充輸入字段時(shí)，占位符（Placeholders ）會(huì)消失。 這會(huì)影響 :placeholder-shown 偽選擇器。*

標(biāo)簽: css  css3  Placeholder  標(biāo)簽浮動(dòng)  注冊(cè)表單  登錄表單