ADF 不会更改为 CSS :checked 状态答案

【问题标题】：ADF doesn`t change to CSS :checked stateADF 不会更改为 CSS :checked 状态
【发布时间】：2014-11-03 15:48:16
【问题描述】：

我是 ADF 的新手，现在我遇到了使用 CSS 自定义 ADF 复选框和单选按钮的问题。这是一个演示：

`http://jsfiddle.net/sbef2so3/16/`

在 jsfiddle 中一切正常，但在 ADF 状态下不会更改为 :checked。也许还有另一种方法可以更改 ADF 中复选框/单选按钮的状态？

！重要。我无法更改 HTML 代码，因为它是由 ADF 生成的。

【问题讨论】：

我认为它确实更改为 :checked 。 . .这可能吗？
天哪，当我在 JDeveloper 11.1.1.7.0 中使用这段代码时，它不起作用。当我按下单选按钮时，没有任何反应，它保持不变。

标签： html css oracle-adf pseudo-element pseudo-class

【解决方案1】：

您将哪个组件用于复选框或单选按钮。我在我的 jsf 页面中使用了纯 HTML 标记并添加了您的 CSS 代码，并看到了与您的小提琴相同的输出：

<input type="radio" name="..." value="..." />

如果您使用 ADF 组件，例如 selectBooleanRadio，则预计会生成一个 ADF Skin file，它是 CSS 的超集，在这里我们编写针对组件而不是 DOM 元素本身的选择器。所以这是一个皮肤文件的示例：

af|selectBooleanRadio::label {
    color: green;
}

这用绿色填充selectBooleanRadio 组件的标签。

将您的 CSS 样式表更改为 ADF 外观并非易事，即使由于 ADF 内部限制并非不可能。因此，通过坚持使用纯 CSS 解决方案，也许您可以通过将 styleClass 添加到组件来使您的样式正常工作，这可能会抑制当前应用程序主题不需要的添加样式：

<af:selectBooleanRadio text="ADF Radio Button" label="Label" styleClass="customRadioButtonComp"/>

在您的.css 文件中添加类前缀：

.customRadioButtonComp input[type="radio"] {
    display: inline-block;
    width: 21px;
    height: 21px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background: url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png)0px top no-repeat;
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    /* Firefox */

    -webkit-appearance: none;
    /* Safari and Chrome */
}

.customRadioButtonComp input[type="radio"]:checked {
    background: url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png)0px bottom no-repeat;
}

【讨论】：