动画输入占位符成为标签？

Question

我很想通过 TailwindCSS 和输入得到类似的东西，这可能吗？我相信这个特定的组件是用 Vue.js 写的。

<div class="v-input theme--light v-text-field v-text-field--is-booted v-text-field--enclosed v-text-field--outlined">
   <div class="v-input__control">
      <div class="v-input__slot">
         <fieldset aria-hidden="true">
            <legend style="width: 0px;"><span></span></legend>
         </fieldset>
         <div class="v-text-field__slot"><label for="input-145" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Link to visit (optional)</label><input id="input-145" type="text"></div>
      </div>
      <div class="v-text-field__details">
         <div class="v-messages theme--light">
            <div class="v-messages__wrapper"></div>
         </div>
         <div class="v-counter theme--light">0 / 200</div>
      </div>
   </div>
</div>

This is how it looks like.

Answer 1

是的，这是可能的。我找到了 3 个与此相关的资源。一定要检查一下。

Material Tailwind Tailwind Components Dev

动画输入占位符成为标签？

Animate input placeholder to become a label?

css

vue.js

tailwind-css