title: Why won't the textbox render to the set width?
body: <p>I'm trying to create a custom textbox for a search function.  However, the browser is ignoring the width setting in the css.  I even took the code out completely and placed it in its own html file in case it was being restricted by something else.  I've used both Google Chrome v38 and IE11</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
      
          &lt;link href="Content/Site.css" rel="stylesheet" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;input type="text" class="bigsearch"&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>with the css</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>     .bigsearch {
                  top: 20px;
                  left: 20px;
                  padding: 5px;
                  border-radius: 10px;
                  box-shadow: 0 0 12px;
                  width: 700px;
                  font-size: 22px;
              }</code></pre>
  </div>
  </div>
  </p>
  
  <p>yet in the browser, the textbox is rendered with a width of about 300px, regardless of what I set it to in css.</p>
  
  <p>If I change the code to</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>         &lt;body&gt;
                  &lt;input type="text" style="width: 700px" class="bigsearch"&gt;
              &lt;/body</code></pre>
  </div>
  </div>
  </p>
  
  <p>I get the same result.  However, if I take all the css and put it in the html page, removing the link to the stylesheet file as such,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;style&gt;
          .bigsearch {
              top: 20px;
              left: 20px;
              padding: 5px;
              border-radius: 10px;
              box-shadow: 0 0 12px;
              width: 700px;
              font-size: 22px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="text" class="bigsearch"&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>it works properly.  So, what gives?</p>
  
  <p>EDIT:
  I should add that the rest of the styles are being applied to the textbox - shadow, rounded corners etc.</p>