Tailwind CSS 更改占位符选项的文本颜色

Question

我有一个项目需要在表单中使用 select。所有其他类型的输入都有一个浅灰色的占位符。在输入中输入的文本是黑色的。

表单的 select 输入需要具有相同的样式。 default/placeholder 值需要以深灰色显示，用户可以 select 的实际值需要以黑色显示。但是当我尝试为第一个 (default/placeholder) 选项指定不同的颜色时，它不使用这种颜色。它实际上继续使用 select 元素中指定的颜色。

这里是元素里面的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>

Answer 1

使用 vanilla CSS 也可能是一个棘手的问题，但有一个解决方法。如果它是必填字段，您可以将 required 属性添加到 select 元素，并使用 :invalid pseudo class 将其设置为占位符。这个想法是，如果第一个选项用作占位符，默认情况下它是 selected 和 disabled，则该表单字段无效，因此您可以将其设置为这样的样式。

在下面的代码片段中，我只添加了一个 required 属性并直接设置了 :invalid class 的样式，这不是真正的 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 变体

尽管 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`;
        });
      });
    }),
  ],
};

现在您可以在 select 元素中将 class 用作 invalid:text-gray-400，并摆脱自定义 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 条件 classes

当您使用 Vue 时，第三种选择是使用条件 classes。只需根据 carType.

的值在 class 两个 text-gray-400 和 text-black-primary 之间切换

Tailwind CSS 更改占位符选项的文本颜色

Tailwind CSS change text color of placeholder option

html

css

html-select

tailwind-css

自定义 Tailwind 变体

Vue 条件 classes