Question

我在使用Pardot布局CSS时遇到了一些问题。我试图自定义表单，并且需要添加类来设计不同的字段。创建新类没有问题，代码如下：

        form.form .ownclass{
        margin-left:40px; !important;
        }

        form.form .ownclass label{
              font-size: 14px; !important;
              font-weight: bold !important;
         }

我不知道这是否是最好的方法，但它正在起作用。问题是，例如，我有一些单选按钮。我想更改标题的字体粗细，而不是单选按钮旁边的文本的字体粗细。当我尝试上面的标签代码时，我总是更改标题和选项文本。复选框也有问题。知道我如何只将代码放在标题或单选按钮选项上吗？

感谢您的帮助。

编辑：

有一个奇怪的pardot hmtl代码。在这里：

<form accept-charset="UTF-8" method="post" action="%%form-action-url%%" class="form" id="pardot-form">

%%form-opening-general-content%%


%%form-if-thank-you%%
    %%form-javascript-focus%%
    %%form-thank-you-content%%
    %%form-thank-you-code%%
%%form-end-if-thank-you%%

%%form-if-display-form%%

    %%form-before-form-content%%
        %%form-if-error%%
            <p class="errors">Please correct the errors below:</p>
        %%form-end-if-error%%
        <br/>
        %%form-start-loop-fields%%
        <section class="container">
        <div class="row col-md-12 col-sm-12">
            <p class="form-field %%form-field-css-classes%% %%form-field-class-type%% %%form-field-class-required%% %%form-field-class-hidden%% %%form-field-class-no-label%% %%form-field-class-error%% %%form-field-dependency-css%%" style="padding-left:-160px;">
                %%form-if-field-label%%
                    <label class="field-label" for="%%form-field-id%%">%%form-field-label%%</label>
                %%form-end-if-field-label%%

                %%form-field-input%%
                %%form-if-field-description%%
                    <span class="description">%%form-field-description%%</span>
                %%form-end-if-field-description%%
            </p>
            <div id="error_for_%%form-field-id%%" style="display:none"></div>
            %%form-field-if-error%%
                <p class="error no-label">%%form-field-error-message%%</p>
            %%form-field-end-if-error%%
</div></section>
        %%form-end-loop-fields%%


        %%form-spam-trap-field%%

        <!-- forces IE5-8 to correctly submit UTF8 content  -->
        <input name="_utf8" type="hidden" value="&#9731;" />

        <section class="container">
        <div class="row col-md-12 col-sm-12">

        <br/>
        <br/>
        <p class="submit">
            <input type="submit" accesskey="s" value="%%form-submit-button-text%%" %%form-submit-disabled%%/>
        </p>

    %%form-after-form-content%%
    </div>
    </section>
%%form-end-if-display-form%%

%%form-javascript-link-target-top%%
</form>

编辑2：这是该复选框的html代码：

        <section class="container">
    <div class="row col-md-12 col-sm-12">
        <p class="form-field ownclass Custom_5018_V_M_Alle pd-checkbox required required-custom    " style="padding-left:-160px;">

                <label class="field-label" for="310831_66701pi_310831_66701">Title of the checkbox *</label>


            <span class="value"><span><input type="checkbox" name="310831_66701pi_310831_66701_526719" id="310831_66701pi_310831_66701_526719" value="526719" onchange="" /><label class="inline" for="310831_66701pi_310831_66701_526719">Option 1</label></span><span><input type="checkbox" name="310831_66701pi_310831_66701_526721" id="310831_66701pi_310831_66701_526721" value="526721" onchange="" /><label class="inline" for="310831_66701pi_310831_66701_526721">Option 2</label></span></span>

        </p>
        <div id="error_for_310831_66701pi_310831_66701" style="display:none"></div>

    <section class="container">
    <div class="row col-md-12 col-sm-12">
        <p class="form-field ownclass Opt_in_Status pd-checkbox required required-custom    " style="padding-left:-160px;">

                <label class="field-label" for="310831_67219pi_310831_67219">Überschrift *</label>


            <span class="value"><span><input type="checkbox" name="310831_67219pi_310831_67219_529439" id="310831_67219pi_310831_67219_529439" value="529439" onchange="" /><label class="inline" for="310831_67219pi_310831_67219_529439">Text for the checkbox</label></span></span>

        </p>
        <div id="error_for_310831_67219pi_310831_67219" style="display:none"></div>

这是单选按钮的html代码：

    <section class="container">
    <div class="row col-md-12 col-sm-12">
        <p class="form-field  salutation pd-radio required required-custom    " style="padding-left:-160px;">

                <label class="field-label" for="310831_66691pi_310831_66691">Title of the radio button *</label>


            <span class="value"><span class="" style=""><input type="radio" name="310831_66691pi_310831_66691[]" id="310831_66691pi_310831_66691_526699_526699" value="526699" onchange="" /><label class="inline" for="310831_66691pi_310831_66691_526699_526699"> Frau</label></span><span class="" style=""><input type="radio" name="310831_66691pi_310831_66691[]" id="310831_66691pi_310831_66691_526701_526701" value="526701" onchange="" /><label class="inline" for="310831_66691pi_310831_66691_526701_526701"> Herr</label></span></span>

        </p>
        <div id="error_for_310831_66691pi_310831_66691" style="display:none"></div>

Pardot CSS布局中的自己的类

0 个答案: