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

Posted 2023-03-07

【中文标题】Tailwind CSS 更改占位符选项的文本颜色

【英文标题】：Tailwind CSS change text color of placeholder option

【发布时间】：2021-03-29 00:28:23

【问题描述】：

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

表单的选择输入需要具有相同的样式。默认/占位符值需要以深灰色显示，用户可以选择的实际值需要以黑色显示。但是当我尝试为第一个（默认/占位符）选项指定不同的颜色时，它不会使用这种颜色。它实际上继续使用在选择元素中指定的颜色。

这是元素内部的选择：

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

【参考方案1】：

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

在下面的 sn-p 中，我只添加了一个 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 变体

虽然 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 元素中使用 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 条件类

当您使用 Vue 时，第三种选择是使用条件类。只需根据carType 的值在text-gray-400 和text-black-primary 这两个类之间切换。

【讨论】：

这是一个很棒的答案！您的自定义插件完美运行。谢谢:)