Question

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

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

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

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

Answer 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;
}

ADF不会更改为CSS：已检查状态

1 个答案: