CSS For Read-Only Fields
Still new to CSS, but I've been able to manipulate most fields the way I want. However, there seems to be a default I can't override when it comes to read only text fields. I found what it defaults to in the Developer tools below:
.control div[disabled]:not(.pseudoBtnCommentSubmit),
.k-multiselect.k-state-disabled .k-multiselect-wrap,
.k-numerictextbox .k-numeric-wrap.k-state-disabled .k-select .k-link {
background-color: #F4F4F4 !important;
color: #667287 !important;
border-color: var(--borderColor) !important;
}
I have the text box set to my specific CSS under Appearance > Field CSS Class. When I uncheck the attributes above in the Developer tools, it switches to my custom CSS, which is great. However, I don't know how to write it in the Shared CSS to overwrite the default attributes.
I also have a Date field that is not-Enabled that I need to apply the same style CSS to. Adding this in case it requires something different from the Read-Only text field.
-
Hi Brad Harr,
In the above CSS code snippet which you have taken from developer tools has highest importance by mentioned '!important' to the background-color with '#F4F4F4'. So, to overcome that behavior you need to add '!important' to your custom CSS. I hope this would help for your use case.
Please go through the below url for better understanding and usage on '!important'.
https://www.w3schools.com/css/css_important.asp -
Thanks Gowrisankar. I had actually tried that with no success. AP support got back to me and helped me figure it out. This is the code they have me. This works on text fields though, would be different for disabled date fields and read only text area fields. Just replace "FIELDNAME" with the internal field name you need.
input#FIELDNAME[readonly] {background-color: #000000 !important; color: #0077d9 !important; font-size: x-large !important; text-align: center; border-style: none !important;}
請登入寫評論。
評論
2 條評論