Select Menu with Change Text Color of Disabled Option and Custom Arrow using Tailwind CSS Only

This code demonstrates how to create a custom select menu arrow and change the disabled color of a select option using Tailwind CSS only. Let's take a closer look at the code.

Getting Started

Install Tailwind CSS

HTML Code

Creating HTML:

<!-- Select menu div contains custom arrow -->
<div
    class="relative mb-2 flex items-center after:w-[8px] after:h-[8px] after:border-black/70 after:border-b after:border-r after:transform after:rotate-45 after:absolute after:right-3">
    <!-- Select menu -->
    <select required
        class="text-black/70 bg-white px-3 py-2 transition-all cursor-pointer hover:border-blue-600/30 border border-gray-200 rounded-lg outline-blue-600/50 appearance-none invalid:text-black/30 w-64">
        <option value="" disabled selected>Select a language</option>
        <option value="option1">HTML</option>
        <option value="option2">JavaScript</option>
        <option value="option3">Tailwind CSS</option>
    </select>
</div>

Tailwind CSS Configuration

You will also need to add some custom configurations to your tailwind.config.js file. These configurations define a custom variant for textColor called invalid that changes the text color of disabled options. They also define a custom variant for invalid that targets the :invalid pseudo-class.


/* Add these configurations to your `tailwind.config.js` file. */

const plugin = require('tailwindcss/plugin');

/** @type {import("https://cdn.skypack.dev/tailwindcss@3.3.1").Config} */
module.exports = {
  variants: {
    // Define a custom variant for `textColor` called `invalid`
    textColor: ({ after }) => after(['invalid']),
  },
  plugins: [
    // Define a custom variant for `invalid` that targets `:invalid` pseudo-class
    plugin(function ({ addVariant, e }) {
      addVariant('invalid', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`invalid${separator}${className}`)}:invalid`;
        });
      });
    }),
  ],
};

By following the instructions outlined in this code, you can create a custom select menu that fits the aesthetic of your website and provides an improved user experience for your visitors.

You can access the full code:

CodePen

Custom Select Menu using Tailwind CSS

Getting Started

HTML Code

Tailwind CSS Configuration