Styling for ‘readonly’ attribute on inputs and selects

It would be nice if an element with a readonly attribute had the same styling as a disabled element.

I checked your css and right now I can only get the same styling if I set the attribute as readonly='readonly'.

But I would just like to be able to do  $(element).prop('readonly', true); and have the css working, instead of $(element).attr('readonly', 'readonly');

I tried doing it by adding additional css, similar to what you have for inputs:

/* MDbootstrap */
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=tel],
input[type=number],
input[type=search-md],
input[type=search],
textarea.md-textarea {

  // Disabled & readonly
  &:read-only:not(.select-dropdown) {
    color: $input-disabled-color;
    border-bottom: 1px dotted $input-disabled-color;
    background-color: transparent;
    + label {
      color: $input-disabled-color;
      background-color: transparent;
    }
  }
}

Do you have any suggestions for a clean way of doing this?

P.S. I have MDB 4.4.4 but the version number input field didn't allow me to put in the last digit.