Skip to main content

Do Not Gray Out Invalid Options

Question​

> We have set up validity rules that mark certain combinations of characteristic values as invalid. When a characteristic is set to a specific value, the affected options in other characteristics are grayed out. Is there a way to disable this?

Background​

K3 automatically marks characteristic values that cannot be selected in the current configuration due to validity rules as invalid—by default, through reduced opacity (graying out). This signals to the user that this combination is not possible.

The underlying logic always remains active: If a user selects such a value anyway, K3 adjusts the configuration accordingly and displays a message. This cannot be disabled—only the visual display can be customized.

Solution​

The display can be changed via CSS customization in the K3 Editor without affecting the rule logic.

Step-by-Step Instructions​

  1. Open the K3 Editor and click “Customize Configurator”.
  2. Select “Change the Design”.
  3. Click “Design > Customize”.
  4. Enter the following in the CSS input field:
.configurator .k3-invalid-option {
  opacity: 1;
}
  1. Save the change and check the result in the preview.

Explanation of the CSS Rule​

PartMeaning
.configuratorLimits the rule to the configurator so that no other areas of the page are affected
.k3-invalid-optionTargets all elements that K3 marks as invalid options
opacity: 1Sets the opacity to 100% – no more graying out
Scope of the Rule

This CSS rule affects all invalid options throughout the entire configurator, not just individual features. To limit the rule to a specific feature, a more specific CSS selector would be necessary.

Are the radio buttons still slightly gray?

The radio button elements themselves may still appear slightly gray because they have their own style. This serves as a subtle hint for the user and can also be removed via CSS if desired.