Input fields looks different after form submit (Wordpress) - php

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