CSS- Changing the width of a search box - html

Question

I'd been trying to change the width of the search box in name="size" of my HTML template but can't do it even when I tried width:.
html:
<form class="form" method = "POST" >
<h1>Soccer Shoes Finder</h1>
<div class="line-separator"></div>
<div class="container-fluid form-inline">
<input class="form-control" name = "name" type="text" placeholder="Name"/>
<input class="form-control" name = "size" type="text" placeholder="Size"/>
<button class="form-control fa fa-search" aria-hidden="true"></button>
</div>
</form>
css of the element:
input[name="size"]{
width: 50%;
}
Here's a codepen for better context:
http://codepen.io/tadm123/pen/ZLVWpd

Answer 1

I recommend using this method.
<form class="form" method="POST">
<h1 class="text-center">Soccer Shoes Finder</h1>
<div class="line-separator"></div>
<div class="container ">
<div class="row">
<div class="col-md-4">
<input class="form-control" name="name" type="text" placeholder="Name" />
</div>
<div class="col-md-7">
<input class="form-control" name="size" type="text" placeholder="Size" /></div>
<div class="col-md-1">
<button class="form-control " aria-hidden="true"><i class="fa fa-search"></i></button></div>
</div>
</div>
</form>
Updated Codepen:
http://codepen.io/hunzaboy/pen/aJJpMK

Answer 2

It's getting overwritten by the bootstrap defaults. Specifically:
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
You need to adjust your selector to fix the cascade:
.form-inline input.form-control[name="size"]{
width: 50%;
}

Answer 3

did you try size attribute?
<input type="text" size="15"/>

Answer 4

The input elements use by default display: inline;, you cannot define a width in elements who using that display, if your change the display to display: inline-block; you will can change the width of your element.
input[name="size"]{
width: 50%;
display: inline-block; /* <--- Here the change */
}

Answer 5

Suppose you have a class-name (defined in HTML) of inputText (name).
Adding these lines will help (clean-way/simple).
.inputText{
//...
width:200px;
transition: width .4s ease-in;
}
.inputText:hover, .inputText:focus{
width:400px;
}