Question

How to change radio/checkbox read-only/disabled colours?

Forms Laserfiche Cloud Forms Layout Designer

Updated January 24

asked on January 22

I would like to change the disabled/readonly colour on the selected input as the default grey can be difficult to see.

I've tried targetting input[type="radio"][disabled], input:checked and changing the colour but no luck so far. On the inspect page I can see that I am targeting the right element but the colour I set isn't overwriting the grey.

I'm using the New Forms Designer on Laserfiche Cloud.

Any suggestions would be much appreciated.

0 0

Answer

APPROVED ANSWER

replied on January 24

Hi Matthew. Thank you so much for your help. After reading your suggested post, I added the following css and it really improved the visibility on selected elements.

input[disabled][type="radio"]:checked::before {
	content: "\25C9";
  	position: relative;
  	z-index: 100;
  	top: -3px;
  	left: .5px;
}

input[type="radio"]:checked + .option-label, input[type="checkbox"]:checked + .option-label {
  font-weight: 600;
}

input[disabled][type="checkbox"]:checked::before {
	content: "\2611";
  	position: relative;
  	background: white;
  	font-size: 17px;
  	top: -7px;
  	left: .5px;
  	font-weight: 600;
}

1 0

Replies

replied on January 22

There is a lot of discussion about this issue on this post. Unfortunately, the issue is that the disabled appearance is done by the browser, not by LFForms, so we can't really manipulate that.

There are several responses on the other post that include CSS to tweak how things look. They are all written for the Classic Designer, so there will have to be tweaks to make them work on the new designer. If you like one of the options from the other post, and would like some help re-writing it for the new designer, just let us know which one you like, and there are several of us here who can help re-write it.

2 0

APPROVED ANSWER

replied on January 24

Hi Matthew. Thank you so much for your help. After reading your suggested post, I added the following css and it really improved the visibility on selected elements.

input[disabled][type="radio"]:checked::before {
	content: "\25C9";
  	position: relative;
  	z-index: 100;
  	top: -3px;
  	left: .5px;
}

input[type="radio"]:checked + .option-label, input[type="checkbox"]:checked + .option-label {
  font-weight: 600;
}

input[disabled][type="checkbox"]:checked::before {
	content: "\2611";
  	position: relative;
  	background: white;
  	font-size: 17px;
  	top: -7px;
  	left: .5px;
  	font-weight: 600;
}

1 0

replied on January 24

Fantastic! I'm glad you have a solution that works for you.

0 0

You are not allowed to follow up in this post.

Question

Question

How to change radio/checkbox read-only/disabled colours?

Answer

Replies

Sign in to reply to this post.