Change caret color on selects elements

[shornuk]

Unless I'm mistaken these are all grey-500. Any chance of adding a way to customise the color of these, either via a utility class or within the config?

[MarcelloTheArcane]

I'd like to know the recommended way of changing properties like --tw-ring-color and things.

[shornuk]

I'd like to know the recommended way of changing properties like --tw-ring-color and things.

That's 'out of the box' tailwind and will work on form elements as you can use standard tailwind utilities to style with this new version of the forms plugin. Best to check out the docs. https://tailwindcss.com/docs/ring-color

[darioguarascio]

I spent some hours digging into the code. Unfortunately, colors.gray.500 is hardcoded in svg caret element.
i came up with this: solution:
in tailwind.config.js

const svgToDataUri = require('mini-svg-data-uri')
...

  plugins: [
    require('@tailwindcss/forms'),
    plugin(function({ addComponents, theme }){
      addComponents({
        'select': {
          'background-image': `url("${svgToDataUri(
            `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
              'colors.gray.100',
              colors.gray[100]
            )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
          )}")`,
        }
      })
    })
...

[twd3]

I'm thinking this is just a good reset and then you would change the carrot color with simple utility @apply classes (you could of-course put all the classes right on the elements):
CSS:

.txt-select {
    @apply block appearance-none w-full border-none bg-white text-gray-400 ring-1 ring-gray-400 focus:ring-green-600 px-4 py-3 pr-8 rounded-t rounded-br shadow leading-tight bg-none;
}
.txt-select:hover {
    @apply border-gray-500;
}
.txt-select:focus {
    @apply outline-none text-gray-800;    
}
.select-arrow {
    @apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2;
}
.select-arrow svg {
    @apply fill-current h-5 w-5 text-green-600;
}

HTML:

  <div class="flex md:px-3 mb-6">
    <div class="w-full mt-4">
      <label for="the_select">The Select</label>
      <div class="inline-block relative w-full">                            
      <select name="the_select" id="the_select" class="txt-select">
          <option disabled selected hidden value="">--Please Select--</option>
          <option value="opt_one">Option One</option>
          <option value="opt_two">Option Two</option>
          <option value="opt_three">Option Three</option>  
      </select>
        <div class="select-arrow">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
          </svg>
        </div>
      </div> 
    </div>
  </div>

The bg-none on the select is important because that is how the carrot from the forms plug is shown. Please correct me if I am wrong because I'm trying to learn this. PS: the text-gray-400 on the main txt-select colors the selects placeholder, then the text-gray-800 on the txt-select:focus changes the options to the right color when the select is clicked...ooops then the option changes back to gray-400 when it looses focus. Oh well, at least the placeholders match on first look.

If someone can help me change the color of that first disabled option (and keep it when loosing focus) this would be perfect.
https://play.tailwindcss.com/f0dY8SARPj

[twd3]

Just learned I can also do this to change the icon:

.check-b:checked {
/* CHANGE DEFAULT CHECKBOX ICON - DONT FORGET TO CHANGE VIEW-BOX TO 16 16 AND FILL-WHITE OR WHATEVER - ENCODE SVG WITH - https://yoksel.github.io/url-encoder/ */
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' aria-hidden='true' focusable='false' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.7,13.1L1.1,8.5c-0.3-0.3-0.3-0.7,0-1l1-1c0.3-0.3,0.7-0.3,1,0l3.1,3.1l6.6-6.6c0.3-0.3,0.7-0.3,1,0l1,1 c0.3,0.3,0.3,0.7,0,1l-8.2,8.2C6.5,13.4,6,13.4,5.7,13.1L5.7,13.1z'/%3E%3C/svg%3E");
}

[tsukhu]

Great solutions provided, but I have another issue. I have the tailwind theme created using css variables . And with the svg elements not working with css variables, the generated svg from the plugin is generated but one cannot see it.😒

For now I have overridden the css to make it work , including the dark mode (not very clean , but just a workaround ...)

select {
  background-image: url("data:image/svg+xml, stroke='currentColor' ...");
}

.dark select {
  background-image: url("data:image/svg+xml, ... stroke='white' ...");
}

[basepack]

That looks great and all, but isn't this supposed to work out of the box with tailwindcss-forms?

[tsukhu]

That looks great and all, but isn't this supposed to work out of the box with tailwindcss-forms?

My case was a bit specific. I have created my tailwind theme based on custom css variables that define the colors like grey-500. Only in this case you may require this work around for the select element caret issue as svgs don't support css variables

[basepack]

@tsukhu Thanks for your explanation, however I was merely reacting to the top post. As I also wrongly assumed you could do <select class="form-select text-blue-500" or something else and that would change the caret color.

[brandonpittman]

Seems like an oversight.

[brandonpittman]

Here I am running into this again.

[caicodes]

the caret color was an issue for me as well, I was able to get the desired look with a background blend mode property since I wasn't able to modify the background svg's path stroke, background blend mode 'hard-light' worked for me in light and dark mode and with my dynamic color scheme selection features...

[caicodes]

So just to clarify in case it helps anyone looking as I did for this solution to the gray caret... I added "bg-blend-hard-light" to the select and it works with a subtle arrow regardless of bg color or color mode, it's not precision color control but no js or css hack to the plugin required and I can style with utilities only approach

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

The caret is implemented as a custom background image. Since it is a background image it is not possible to style this svg using normal css. The color is hardcoded to colors.gray.500, which means that you should be able to change this value if you want a different shade.

If you want a complete new icon, then it is best to override the full icon with whatever icon you want. Here is the current implementation:

tailwindcss-forms/src/index.js

Lines 88 to 93 in bb5315c

	'background-image': `url("${svgToDataUri(
	`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
	'colors.gray.500',
	colors.gray[500]
	)}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
	)}")`,

In the future I think we can expose a dedicated option in the tailwind.config.js file to change the color but if we do that then we probably also want to control the thickness, size, color, ...

[basepack]

In the future I think we can expose a dedicated option in the tailwind.config.js file to change the color but if we do that then we probably also want to control the thickness, size, color, ...

Sounds like a good solution to me without breaking changes.

[darmen]

Adding on top of @caicodes's suggestion.

I found bg-blend-color-dodge to be more suitable for my needs, so definitely worth giving it a try.

[silverbackdan]

I have tried using @darioguarascio approach with updated approach with how plugins are now delcared but it doesn't appear to override the arrow anymore... does anyone have thoughts on this or how it could work now?

plugins: [
        require('@tailwindcss/forms'),
        plugin.withOptions( () => {
          return ({addComponents, theme}) => {
            addComponents({
              'select': {
                'background-image': `url("${svgToDataUri(
                    `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${resolveColor(
                        theme('colors.green', '#009F55'),
                        '--tw-stroke-opacity'
                    )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
                )}")`
              }
            })
          }
        })
      ]

[silverbackdan]

Further to my reply above - you must also add the component with the class name '.form-select' as well as 'select' if you intend the change to be applied to both CSS selectors

plugins: [
        require('@tailwindcss/forms'),
        plugin.withOptions( () => {
          return ({addComponents, theme}) => {
            const arrowOps = {
              'background-image': `url("${svgToDataUri(
                  `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${resolveColor(
                      theme('colors.green', '#009F55'),
                      '--tw-stroke-opacity'
                  )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
              )}")`
            }
            addComponents({
              'select': arrowOps,
              '.form-select': arrowOps
            })
          }
        })
      ]