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

Question

I have a form which is styled with css. The form is submitted to the same page. When I post the form, the text input fields look different - the padding on top and bottom seems to be gone (not the left and right padding though).

However, when I inspect the code, the css values are the same. Except for the text input fields, everything looks as it should.

The code of the form:

<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>

When the page is loaded initially, the text input fields have these values (and it looks as it should):

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

When the form is submitted, the page reloads, and then the css looks like this (identical):

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

}

..but as I said, the text input fields are not of the same height! When I check the new height in Photoshop, it is 23px. The original value of the height is 25px plus 9px (top and bottom padding).

By the way, I use a separate css file for this page , which I have registered in "functions.php". I placed it beneath the wp_register_style for 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!    

It is a strange problem, and I am hoping you can find the solution.

Answer 1

Try this one

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