Width of input field won't reduce - css

Question

I've tried reducing my "Number of employees" input field to a size of "3" (all others have a size of "8").
However my number of employees input field is not reducing it's length?
Can anyone shed any light to as why?
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Arial", "Myriad Pro", "Myriad Web", "Tahoma", "Helvetica", sans-serif;
font-size: 0.9em;
}
form header {
margin: 0 0 20px 0;
}
form header div {
font-size: 90%;
color: #999;
}
form header h2 {
margin: 0 0 5px 0;
}
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
width: 100%;
height: 1.6em;
border-top: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #a9a9a9;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
outline: 0;
border-color: #4697e4;
}
#media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
width: 100%;
}
}
#media (min-width: 1200px) {
form > div > label,
legend {
text-align: right;
}
}
/* JQuery Validation */
label.error,
select.error,
textarea.error,
input.error {
padding-left: 5px;
display: block;
color: #f00;
}
label {
padding-right: 10px;
}
.hide {
display: none;
}
.loader {
background: url("https://secure.workbooks.com/resources/=QzM/spinner_gray_160.gif") no-repeat center center transparent;
}
.notification {
font-weight: bold;
background-color: rgb(209, 224, 94);
border-radius: 5px;
padding: 10px;
color: rgb(131, 6, 6);
}
.loudbutton,
.quietbutton {
width: 60%;
height: 40%;
color: white;
border-radius: 0.5em;
background-color: rgb(79, 111, 163);
border: none;
padding: 7px;
margin: 10px 0px 10px 0px;
-webkit-appearance: none;
float: none;
}
.desc {
font-weight: bold;
}
.grayborder {
border: 1px solid;
}
.quietbutton {
margin-left: 10px;
}
.loudbutton {
font-size: 1.35em;
}
.quietbutton {
font-size: 0.8em;
}
.loudbutton:hover {
cursor: pointer;
width: 60%;
height: 40%;
background-color: #84a3d9;
}
/* Sticky footer: http://www.cssstickyfooter.com/ */
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 45px;
/* must be same height as the footer */
}
#main-img {
float: left;
}
#main-banner {
float: right;
padding-left: 20px;
}
#main-body {
clear: both;
}
/*Opera Fix*/
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
/
}
/* Workbooks Attribution: please leave this */
#footer {
position: relative;
margin-top: -45px;
height: 45px;
clear: both;
background-image: url(https://secure.workbooks.com/images/logo/workbooks_logo.png);
background-color: #80a0ff;
background-position: center left;
background-repeat: no-repeat;
background-size: 119px 42px;
}
#workbooks-link {
position: absolute;
text-decoration: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background-image: url('https://secure.workbooks.com/images/s.gif');
/* fix overlap error in IE7/8 */
}
/* Fade-in Spinner */
#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://public.workbooks.com/images/spinner.gif) 50% 50% no-repeat #ede9df;
}
<form action="#">
<div>
<label class="desc" id="title1" for="first_name">First Name</label>
<div>
<input id="first_name" name="first_name" type="text" class="required field text fn" value="" size="8" tabindex="1" minlength="2" autofocus>
</div>
</div>
<div>
<label class="desc" id="title2" for="last_name">Last Name</label>
<div>
<input id="last_name" name="last_name" type="text" class="required field text fn" value="" size="8" tabindex="2">
</div>
</div>
<div>
<label class="desc" id="title3" for="email">Email</label>
<div>
<input id="email" name="email" type="email" class="required email" spellcheck="false" value="" maxlength="255" tabindex="3">
</div>
</div>
<div>
<label class="desc" id="title4" for="telephone">Telephone</label>
<div>
<input id="telephone" name="telephone" type="text" class="required field text fn" value="" size="8" tabindex="4">
</div>
</div>
<div>
<label class="desc" id="title5" for="number_of_employees">Number of Employees</label>
<div>
<input id="number_of_employees" tabindex="5" name="number_of_employees" type="text" class="required integer field text fn" pattern="[0-9]*" size="3" />
</div>
</div>
<div>
<label class="desc" id="title6" for="company_name">Company Name</label>
<div>
<input id="company_name" name="company_name" type="text" class="required field text fn" value="" size="8" tabindex="6">
</div>
</div>
<div>
<fieldset>
<div>
<div>
<input id="submit" name="submit" type="submit" value="Get access ►" class="loudbutton" />
</div>
</div>
</form>

Answer 1

Your css rules are taking precedence and the size attribute is no longer considered, unless css is disabled.
In 1 of your css rules you define the width of an input as 50%, what you need is to create a "stronger" rule that will define the size for smaller inputs. You can do so by adding a class to the same rule that sets the initial width.
Add a new line after this code with:
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 50%;
}
/* new line - adjustment to smaller input fields */
input[type=text].size-small,
input[type=email].size-small,
input[type=url].size-small,
input[type=password].size-small {
width: 25%;
}
and for the elements that you would like to assign size="3" add attribute class="size-small"