Issue with Custom CSS

[eslinz]

• Goal: I am trying to make a disabled checkbox list not look greyed out while it's disabled (I basically want it to be read only, but still clearly visible)

• Steps: It seems this is not available directly in the component itself, but please let me know if I'm missing something. I am now trying to use Custom CSS to override the style when the component is disabled, but it's not working as I expected.

• Details: I am using the proper class selector for the element. See below screenshots.

• Screenshots:
  

  
  
  This code successfully produces the border on the component.
  
  
  
  But this code below does not show me the border.
  
  Is there a different way to access the element when it's disabled? I have tried changing the color/opacity of the text in the component without the :disabled indicator but the greyed-out quality remains. Thanks for any help!

[MiguelOrtiz]

Following as I've faced this in the past and would love to have a workaround with CSS

[Tess]

Custom CSS can be difficult to maintain, so if possible, I'd recommend using a container with a conditional border. You can expand contents to fit the container & remove padding/margins

Otherwise, it looks like you could try something like this:

[eslinz]

Thanks for the reply, @Tess . For more context, I was using the border as an example because it's easily visible. What I'm really trying to do is make the CheckBoxGroup not look greyed out while it's disabled. I essentially want it to be read only, as the boxes will be filled dynamically and I don't want the user to change the boxes, but still be able to read them clearly.

[Tess]

You should be able to override the opacity or modify the css as needed. You may need to do some investigating to find the right css class. Something like the below example will require maintenance, as the randomly generated css classes will change over time without warning (which is why I tend to recommend the container/border approach):

[eslinz]

Got it! Thanks Tess. I understand this isn't ideal, but thanks for the workaround until we either figure out a better solution or change the component we're using.