如何为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 {

        显示:块;




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






 


本文是否有帮助?
0之0认为有帮助

评论

0评论

登入 发表评论。