Hello,
I have been using Kendo UI's readonly and enable properties for different fields i.e. comboboxes, dropdowns, date pickers, numeric text boxes etc and have noticed that there is a very subtle difference between readonly and disabled fields using the default theme. Is there a way that I can target all the disabled fields to apply one style element (for eg: background-color: grey) so that its easier to distinguish between readonly and disabled fields? If so, what are the selectors I need to target? Kindly let me know.
Cheers.
Iram
Managed to do it with just CSS:
.rbs-editField-valueContainer input[disabled],.rbs-editField-valueContainer textArea[disabled],.rbs-editField-valueContainer > .k-multiselect.k-state-disabled, .rbs-editField-valueContainer > .k-dropdown > .k-dropdown-wrap.k-state-disabled > span {
background-color: grey;
}
Thanks.
Please try:
.rbs-editField-valueContainer input[disabled],.rbs-editField-valueContainer textArea[disabled]
Doesn't work well with lookup selector fields(k-multiselect-wrap) and dropdown fields(k-dropdown). Any suggestions on how I can include them too please? Works well with the rest of the fields.
Revised Selector:
$('.rbs-editField-valueContainer input[disabled],.rbs-editField-valueContainer textArea[disabled],.rbs-editField-valueContainer .k-multiselect-wrap:has(input[disabled])').css('background-color','grey')
Managed to do it with just CSS:
.rbs-editField-valueContainer input[disabled],.rbs-editField-valueContainer textArea[disabled],.rbs-editField-valueContainer > .k-multiselect.k-state-disabled, .rbs-editField-valueContainer > .k-dropdown > .k-dropdown-wrap.k-state-disabled > span {
background-color: grey;
}
Thanks.