Disabled b-select and b-input have different colors

[miraculli]

Overview of the problem

Buefy version: [0.8.20]
Vuejs version: [2.6.11]
OS/Browser: macOS 10.15.5 / Chrome 83.0.4103.97

Description

When I make use of different form-fields like b-input and b-select as disabled they don't look exactly the same and the disabled b-input is (much) harder to read than a disabled b-select.

Steps to reproduce

<b-field label="Target" label-position="on-border">
  <b-select v-model="sink" disabled>
    <option value="AAA"> AAA</option>
    <option value="BBB">BBB</option>
    <option value="CCC">CCC</option>
  </b-select>
</b-field>

<b-field label="Titel" label-position="on-border">
  <b-input disabled placeholder="Lorem Ipsum"></b-input>
</b-field>

Expected behavior

Disabled fields use the same colors, grey-tones

Actual behavior

Disabled fields don't use the same colors, grey-tones.

[service-paradis]

You're right. It not directly related to Buefy nor Bulma. It is the browser default styles as you can see in this example:
https://codepen.io/service-paradis/pen/ZEQRzad?editable=true

In this case, Chrome apply opacity: 0.7 for disabled select element. No opacity is set for disabled input.

Maybe, it is worth opening an issue at Bulma for this. There are 2 easy solutions for this:

1. Force opacity: 1 for disabled select
2. Force opacity: 0.7 for disabled input

We can ask @jtommy if he want to apply this fix in the Buefy codebase.

[jtommy]

@service-paradis yes we can add in Buefy codebase. As you want for 1 o 2 solution :)

[kashifusman]

I am still having the issue on IOS/Safari the select and input have different font color.