如何利用自定义CSS样式设置单选/多选控件的样式

通过我们最新发布的自定义CSS功能,您可以根据需要对表单中的控件进行自定义样式修改。在本示例中我们将通过自定义CSS来修改选择控件(单选,多选)的只读状态下,被选中的选项的颜色。

在默认情况下,如果如果单选,多选控件处于只读状态时,前面的选择框将被设置为灰色。被选中的选项内会有深灰色的选中标志,如下:
image

在此情况下,被选中的选项的显示颜色可以不太清晰直观,您可以通过在表单设计器中,添加一个带有自定义CSS支持的控件,比如Section控件。然后在此控件的高级(Advanced)选项卡中,选择“Custom CSS”:

然后在输入框中添加如下样式:

.ant-radio-disabled .ant-radio-inner:after
{
background:#1563f6;
}

.ant-checkbox-checked .ant-checkbox-inner, .ant-checkbox-indeterminate .ant-checkbox-inner
{
border-color:#1563f6;
}
.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after
{
border-color:#1563f6;
}

然后提交发布此表单。这样可以将在选中的单选/多选控件的只读状态时将被选中标识修改为蓝色,效果如下:

image

您可以根据需要修改对应的颜色值,或者添加其他更个性化的样式。