我有一个项目,我需要在表单中使用选择。所有其他类型的输入都有一个浅灰色的占位符。输入中输入的文本是黑色的。
表单的选择输入需要有相同的样式。默认/占位符值需要以深灰色显示,用户可以选择的实际值需要以黑色显示。但是当我尝试为第一个(默认/占位符)选项指定不同的颜色时,它不使用这种颜色。它实际上继续使用 select 元素中指定的颜色。
这是元素内部的选择:
<select
type="text"
name="carType"
id="carType"
v-model="carType"
placeholder="Car Type"
class="my-2 px-4 py-3 border rounded-lg text-black-primary focus:outline-none text-sm"
>
<option class="text-gray-400" value="" disabled selected>Select your option</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
使用 vanilla CSS 也可能是一个棘手的问题,但有一个解决方法。如果它是必填字段,您可以将
required
属性添加到您的 select
元素,并使用 :invalid
伪类 将其设置为占位符。这个想法是,如果第一个选项用作占位符,默认情况下它是 selected
和 disabled
,则该表单字段无效,因此您可以将其设置为这样的样式。
在下面的代码片段中,我只添加了一个
required
属性并直接为 :invalid
类设置样式,这不是真正的 Tailwind-y,但它有效:
@import url("https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css");
:invalid {
color: rgba(156, 163, 175, 1);
}
<select
type="text"
id="carType"
class="my-2 px-4 py-3 border rounded-lg text-black-primary focus:outline-none text-sm"
name="carType"
required
v-model="carType"
>
<option value="" disabled selected>Select your option</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
以下仅与Tailwind 2有关,Tailwind 3已添加无效:utilities
尽管 Tailwind 具有
hover:
、focus:
、disabled:
等实用程序,但不幸的是它没有 invalid:
实用程序。如果你想使用 invalid:text-gray-400
变体,你需要创建一个插件。幸运的是,文档有一个 nice example 可以用作我们的基础:
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
variants: {
textColor: ({ after }) => after(['invalid']),
},
plugins: [
plugin(function ({ addVariant, e }) {
addVariant('invalid', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`invalid${separator}${className}`)}:invalid`;
});
});
}),
],
};
现在您可以在
invalid:text-gray-400
元素中使用类作为select
,并摆脱自定义CSS样式:
<select
type="text"
id="carType"
class="my-2 px-4 py-3 border rounded-lg text-black-primary invalid:text-gray-400 focus:outline-none text-sm"
name="carType"
required
v-model="carType"
>
<option value="" disabled selected>Select your option</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
当您使用 Vue 时,第三种选择是使用条件类。只需根据
text-gray-400
的值在 text-black-primary
和 carType
两个类之间切换。