CSS For Read-Only Fields

フォローする

Brad Harr

• 2022年04月13日 15:20

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.

0

• 

  Gowrisankar

  • 2022年04月29日 13:26

  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 
  

  0

  コメントアクション パーマリンク
• 

  Brad Harr

  • 2022年04月29日 14:23

  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;}

  0

  コメントアクション パーマリンク

サインインしてコメントを残してください。