input=date-stack溢出的HTML-浮动标签

顺晟科技

2022-10-19 13:32:26

我正在为我的Vue应用程序使用TailwindCSS。我正在寻找的是输入日期元素浮动标签的解决方案。问题是输入标签始终保持激活状态。

我尝试的内容:

顺晟科技：

实时检查:jsfiddle.net/jucp51eo/

<div class="relative">
    <input id="date-placeholder" type="date" inputmode="date" class="focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md" value="2019-02-23" />
    <label
        for="date-placeholder"
        class="absolute left-3 bg-white -top-2.5 px-1 text-gray-600 text-sm transition-all duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2.5 peer-focus:-top-2.5 peer-focus:text-gray-600 peer-focus:text-sm">
        Test Date
    </label>
</div>

输入属性应与标签属性相同。

输入type=“text”，但onfocus在type=“date”上发生变化（技巧如下）

<div class="relative">
    <input id="date-placeholder" type="date" inputmode="date" class="focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md" value="2019-02-23" />
    <label
        for="date-placeholder"
        class="absolute left-3 bg-white -top-2.5 px-1 text-gray-600 text-sm transition-all duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2.5 peer-focus:-top-2.5 peer-focus:text-gray-600 peer-focus:text-sm">
        Test Date
    </label>
</div>

上一篇：JavaScript-ho转到上一页下一篇：html-当我单击“abosee”选

网站建设

Html

input=date-stack溢出的HTML-浮动标签