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