如何为Webforms的复选框/单选按钮创建自定义样式

要为Active Demand中的单选按钮创建自定义样式，请选择"单选按钮" from the content field. It should look like the image below:

要自定义单选按钮的外观，需要自定义代码。获取代码后，需要单击“表单/样式”按钮，将代码复制并粘贴到“自定义CSS”选项卡中，然后单击“保存”。

例如，在下面的“自定义CSS”选项卡中复制并粘贴此自定义代码会使单选按钮在下图中变大：

/ *单选按钮的自定义CSS * /

    %FORM.HTML_ID% .radio > label {

        显示：块；

        职位：相对

        padding-left：35px;

        底边距：12px;

        光标：指针；

        -webkit-user-select：无；

        -moz-user-select：无；

        -ms-user-select：无；

        用户选择：无；

    }

    %FORM.HTML_ID% .radio > label input {

        位置：绝对；

        不透明度：0；

        光标：指针；

        高度：0；

        宽度：0;

    }

    %FORM.HTML_ID% .radio > label .required {

        位置：绝对；

        最高：0;

        左：0；

        背景颜色：#ffffff;

        边框：实心1px＃868686；

        字号：11px；

        边界半径：50％；

        高度：25px；

        宽度：25px；

        行高：25px;

    }

    %FORM.HTML_ID% .radio > label:hover input ~ .required {

        background-color：#fefefe;

    }

    %FORM.HTML_ID% .radio > label input:checked ~ .required {

        背景：#eeeeee；

        框阴影：0px 0px 0px 1px #eeeeee;

    }

    %FORM.HTML_ID% .radio > label .required:after {

        显示：无；

        内容：“”；

        顶部：7px；

        左：8px；

        宽度：8px；

        高度：8px；

        边界半径：50％；

        背景：＃212326；

        位置：绝对；

    }

    %FORM.HTML_ID% .radio > label input:checked ~ .required:after {

        显示：块；

*要查看单选按钮上的代码更改，请单击“预览表单”

要为Active Demand中的复选框创建自定义样式，请从内容字段中选择“复选框”。它看起来应如下图所示：

要自定义复选框的外观，需要自定义代码。获取代码后，需要单击“表单/样式”按钮，将代码复制并粘贴到“自定义CSS”选项卡中，然后单击“保存”。

例如，在下面的“自定义CSS”选项卡中复制并粘贴此自定义代码将使复选框在下图中变大。

/ *复选框的自定义CSS * /

    %FORM.HTML_ID% .checkbox > label {

        显示：块；

        职位：相对

        padding-left：35px;

        底边距：12px;

        光标：指针；

        -webkit-user-select：无；

        -moz-user-select：无；

        -ms-user-select：无；

        用户选择：无；

    }

    %FORM.HTML_ID% .checkbox > label input {

        位置：绝对；

        不透明度：0；

        光标：指针；

        高度：0；

        宽度：0;

    }

    %FORM.HTML_ID% .checkbox > label .required {

        位置：绝对；

        最高：0;

        左：0；

        背景颜色：#ffffff;

        边框：实心1px＃868686；

        字号：11px；

        border-radius：3px;

        高度：25px；

        宽度：25px；

        行高：25px;

    }

    %FORM.HTML_ID% .checkbox > label:hover input ~ .required {

        background-color：#fefefe;

    }

    %FORM.HTML_ID% .checkbox > label input:checked ~ .required {

        背景：#eeeeee；

        框阴影：0px 0px 0px 1px #eeeeee;

    }

    %FORM.HTML_ID% .checkbox > label .required:after {

        显示：无；

        内容：“”；

        左：8px；

        顶部：4px；

        宽度：5像素；

        高度：10px；

        边框：实心＃212326；

        border-width：0 3px 3px 0;

        -webkit-transform：旋转（45deg）;

        -ms-transform：旋转（45deg）;

        变换：rotate（45deg）;

        位置：绝对；

    }

    %FORM.HTML_ID% .checkbox > label input:checked ~ .required:after {

        显示：块；

*要查看复选框上的代码所做的更改，请单击“预览表单”