Can't find what is adding width to a form element - forms

Question

I have a search box that expands upon hover which relies on the input field being completely hidden initially; however I can't seem to find what is causing this width.
Here is my code; and the live version is: http://stylrs.com/ctf/
.search_header {
float: right;
clear: both;
height: 30px;
}
.search_header input {
-moz-transition: width 0.5s;
-ms-transition: width 0.5s;
-webkit-transition: width 0.5s;
transition: width 0.5s;
width: 0;
margin: 0 !important;
}
.search_header input:focus,
.search_header:hover input {
width: 135px;
}
.fa-input {
background-color: none !important;
color: white;
float: right;
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px;
margin-top: 1px;
width: 15px !important;
border: none !important;
padding: 0;
margin: 0;
}
.search_header input[type="text"] {
margin-right: 0;
font-size: 12px;
}
.search_header input[type="submit"] {
appearance: value;
background: none !important;
webkit-appearance: none !important;
}
<div class="search_header">
<form role="search" method="get" id="searchform" class="searchform" action="test">
<div>
<label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label', 'QEPRize'); ?></label>
<input type="text" value="test" name="s" id="s" />
<input type="submit" class="btn fa-input" value="">
</div>
</form>
</div>

Answer 1

It’s padding and border what causes the input to be visible (even when the width is zero).
Set these properties to zero as well and make them part of your animation.