Internet Explorer 11, how to STYLE readonly?

Question

i am double checking if everything is good with my website with also other browsers.

I noticed that in Chrome i can style readonly but in Internet Explorer you can't style it.

I normally have disabled on input fields but this readonly fields need to be readonly for putting it into the database.

If it's not possible. I want the readonly input not to be focused in with the mouse click. Because i now have a input field readonly with a placeholder. If i click inside the readonly input the text dissapears. So the input can change if i click inside it. Can that be prevented if my first question can't be done?

Thanks for your time, i appreciate it.

HTML readonly (need it to be readonly because i have to POST it)

<input id='overNightRate' type='text' name='overNightRate' class='form-control disabledDesign' placeholder="Bedrag word berekent" readonly/>

CSS

.disabledDesign:read-only{background-color:#003c85;
  color: white;
opacity: 1;}

And i have more input fields which are the same but just calculate the sum of something. And that needs to be readonly also because it needs to store that input data to the database

Answer 1

If it needs to be readonly, I believe IE 11 supports the attr selector:

.disabledDesign[readonly='readonly'] {
  background-color: #003c85;
  color: white;
  opacity: 1;
  pointer-events: none;
}

<input id='overNightRate' type='text' name='overNightRate' class='form-control disabledDesign' placeholder="Bedrag word berekent" readonly="readonly" />

Edit: Tested on IE11 and works as expected.