":CHECKED" Skin Selector Not Available For <af:selectoneradio> Component (Doc ID 2598662.1)

Last updated on APRIL 12, 2024

Applies to:

Symptoms

On : 11.1.1.9.0 version, ADF Core (Architecture, Model, Controllers, Business Comps. and Security)

An ADF 11.1.1.9.0 application has a page with radio buttons (like af:selectOneRadio component) and uses a custom style sheet to show selected and unselected radio buttons with different set of colors.

To accomplish this CSS :checked selector is used in custom style sheet.

Sample page:

          <af:selectOneRadio id="sor1" layout="horizontal" value="ITEM_1" styleClass="[STYLE_NAME]" simple="true" autoSubmit="true">
              <af:selectItem label="Item 1" value="ITEM_1" id="si1"/>
              <af:selectItem label="Item 2" value="ITEM_2" id="si2"/>
              <af:selectItem label="Item 3" value="ITEM_3" id="si3"/>
          </af:selectOneRadio>

Sample CSS:

.<STYLE_NAME> input[type="radio"] {
  border: 2px solid #40A828;
  border-radius: 100px;
  background: #ffffff !important ;
}
.<STYLE_NAME> input[type="radio"]:checked{
  border: 2px solid #40A828;
  border-radius: 100px;
  background: #40A828 !important ;
}
.<STYLE_NAME> input[type="radio"]:checked + label {
  cursor: pointer;
  border: 2px solid #40A828;
  border-radius: 100px;
  background: #40A828 !important;
}

The above code is supposed to render the select items of af:selectOneRadio component in the following way:
- When not selected, radio button as white with green circular border.
- When selected, radio button as green.

Unselected style works: radio buttons are white with green circular border when not selected.

But Selected style does NOT: radio buttons are still rendered as white with green circular border, instead of green.

Changes

Cause

My Oracle Support provides customers with access to over a million knowledge articles and a vibrant support community of peers and Oracle experts.