Windows select dropdown values appear initially dimmed even though not disabled

[codekiln]

In Windows, the non-disabled values of the select dropdown appear unexpectedly dimmed upon first interaction. After selecting a value, they no longer appear dimmed.

To Reproduce

In Windows 10 (presumably other Windows versions, too), open Chrome or Firefox, go to https://vueformulate.com/guide/inputs/types/select/, and click on Which of your children is your favorite?.

Expected result

The non-disabled values in drop-down should not appear dimmed in dropdown. On Mac, this is the behavior:

Actual result

The text values in the drop-down appear dimmed if an option is not yet selected. After selecting an option, the values in the drop-down no longer appear dimmed: Chrome: Firefox:

Device information

• Device: Mac Laptop running Windows 10 in VirtualBox
• Browser Chrome and Firefox, latest versions

[andrew-boyd]

Thank you for the report @codekiln, I'll look into it.

[codekiln]

Workaround: I was able to customize the snow theme for select inputs with the following customization:

@import "~@braid/vue-formulate/themes/snow/variables";
@import "~@braid/vue-formulate/themes/snow/inputs";
.formulate-input {
  &[data-classification='select'] {
    select {
      &[data-placeholder-selected] {
        color: var(--zep-black); // use my own custom color
      }
    }
  }
}

[justin-schroeder]

Oh nice, that'll make fixing it easier for us too :) thanks for sharing.

[andrew-boyd]

@justin-schroeder So the only way to "fix" this is to remove the custom gray color styling altogether when the placeholder value is chosen. select lists are very difficult to style without deviating from native HTML inputs and it's left up to the parent OS as to what the treatment should be.

If we remove the custom gray color on [data-placeholder-selected] then Windows does what we want.

I vote that we nix the [data-placehoder-selected] and let the OS do it's best to determine what the input color should be. I think it's less confusing to have a dark-color placeholder, which in a well-designed form should be obviously a placeholder, rather than to open the select element and have all the children appear as if they are disabled.

if someone wants to take a different stance in their own theme then they are welcome to, but we should err towards the most accessible approach in our default theme.

[justin-schroeder]

I think this is actually possible @andrew-boyd. Im pretty sure the discrepency here is that on windows the <option> tag can inherit some styles where on a mac it cannot. If that's true then all we need to do is add an override style to the selected and non-selected option selectors. 🤷‍♂️ Gonna give it a shot.

[justin-schroeder]

Ok, I think that solved it 👍 This closing this, it's fixed in release/2.4.4. Also I made the placeholder hidden in the select list as I think it better mimics how native placeholders work.