表单提交（Wordpress）后，输入字段看起来有所不同

Question

我有一个样式的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”中注册。 我将其放置在styles.css的wp_register_style下面：

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

这是一个奇怪的问题，我希望您能找到解决方案。

Answer 1

试试这个

.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;
}