表单提交后输入字段看起来不同(Wordpress)


Input fields looks different after form submit (Wordpress)

我有一个样式为css的表单。表单被提交到同一页面。当我发布表单时,文本输入字段看起来不同-顶部和底部的填充似乎消失了(虽然不是左右填充)。

然而,当我检查代码时,css值是相同的。除了文本输入字段外,其他内容看起来都很正常。

形式的代码:

<div class="form mtop20">
<form action="" method="post" name="myform" id="signup_form">
    <div>
        <input type="text" name="fname" class="textinput" placeholder="Förnamn" maxlength="30" >
        <input type="text" name="lname" class="textinput" placeholder="Efternamn" maxlength="30" >
        <input type="text" name="email" class="textinput" placeholder="Emailadress" maxlength="50">
        <p class="font_form_text"><input type="text" name="lineage_nr" placeholder="Ättnummer" maxlength="10" class="sm_textinput" ></p>
        <p class="font_form_text mtop20">Jag vill ha utskick via brev:  <span class="fright padr10 valign_b"><label for="brev_ja">Ja </label><input type="radio" id="brev_ja" class="valign_m" name="brevutskick" value="Ja" checked="checked"><label for="brev_nej" class="padl5">Nej </label> <input type="radio"  id="brev_nej" name="brevutskick" value="Nej" ></span></p>
        <p class="font_form_text mtop20">Jag representerar mig själv: <span class="fright padr10 valign_b"> <label for="lineage_y">Ja </label><input type="radio" id="lineage_y" class="valign_m" name="own_lineage" value="Ja"><label for="lineage_n"class="padl5">Nej </label> <input type="radio" id="lineage_n" name="own_lineage" value="Nej"></span></p>
        <div id="hidden_lineage_form">
            <p class="font_form_text mtop20 padb7">Fullmakt behövs:</p>
            <input type="text" name="lineage_name" class="textinput" placeholder="Ättenamn" maxlength="40">
            <input type="text" name="pers_nr" placeholder="Personnummer" class="sm_textinput" maxlength="11">
        </div><br>
        <?php wp_nonce_field( 'signup', 'signup_nonce' ); ?>
            <input type="submit" class="submit mtop20 fright padr10" name="submit_msg" value="Skicka">
    </div>
</form>

最初加载页面时,文本输入字段具有这些值(看起来应该是这样):

.sm_textinput, .textinput {
height: 25px;
margin-bottom: 5px;
background: #fdfef5;
border: 1px solid #e7e5de;
font-family: 'PT Sans', sans-serif;
font-size: 14px;
padding: 5px 0 4px 8px;
display: block;

当表单提交时,页面重新加载,然后css看起来像这样(相同):

.sm_textinput, .textinput {
height: 25px;
margin-bottom: 5px;
background: #fdfef5;
border: 1px solid #e7e5de;
font-family: 'PT Sans', sans-serif;
font-size: 14px;
padding: 5px 0 4px 8px;
display: block;

}

. .但正如我所说,文本输入字段不是相同的高度!当我在Photoshop中检查新的高度时,它是23px。高度的原始值为25px + 9px(上下填充)。

顺便说一下,我使用了一个单独的css文件,我已经在"functions.php"中注册了。我把它放在wp_register_style下面为styles.css:

wp_register_style('style_extra', get_template_directory_uri() . '/css/style_extra.css', array(), '1.1', 'all');
wp_enqueue_style('style_extra'); // Enqueue it!    

这是一个奇怪的问题,我希望你能找到解决办法。

试试这个

.sm_textinput, .textinput {
height: 25px !important;
margin-bottom: 5px;
background: #fdfef5;
border: 1px solid #e7e5de;
font-family: 'PT Sans', sans-serif;
font-size: 14px;
padding: 5px 0 4px 8px !important;
display: block;
}