title: Can CSS over-rule HTML input size declarations
body: <p>I have inherited a website that has many inputs on various pages, such as:</p>
  
  <pre><code>&lt;input name="name" type="text" id="name" size="40" maxlength="64"&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;textarea name="descr" cols="40" rows="2" id="descr"&gt;
  </code></pre>
  
  <p>I have been improving the CSS of the site to make it flexible layout for mobile devices, etc. But the <code>size</code>/<code>cols</code> rules of the HTML persists in setting the fixed size, regardless of outside factors.</p>
  
  <p>I have tried using CSS such as:</p>
  
  <p>CSS:</p>
  
  <pre><code>input, textarea, select {
      max-width:100%;
  }
  </code></pre>
  
  <p>(And with also appending <code>!important</code>) but this doesn't effect the elements. </p>
  
  <p>It's been converted into an HTML5 template, and the inputs are in a table (but the table is flexible and is not the issue).</p>
  
  <p><strong>Is there a way that CSS can overwrite the HTML <code>size</code>/<code>cols</code> declaration in the inputs?</strong> </p>
  
  <p>The large number of inputs over multiple pages wanted me to find a CSS simple way of overwriting them all in one fell swoop. As far as I can see this doesn't seem directly possible and I will have to go through and edit the size values for each input elements <code>:-/</code>. </p>
  
  <h2>EDIT</h2>
  
  <p>Full Code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table id='centralTable'&gt;
         &lt;tr&gt;
               &lt;td colspan="2"&gt;Update Category&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
               &lt;td width="28%"&gt;&lt;strong&gt;&lt;label for='name'&gt;Category Name&lt;/label&gt;&lt;/strong&gt;&lt;/td&gt;
                &lt;td width="70%"&gt;&lt;input name="name" type="text" id="name" value="catname" size="40" maxlength="40" required&gt;&lt;/td&gt;
        &lt;/tr&gt;
         &lt;tr&gt;
               &lt;td&gt;&lt;input name="id" type="hidden" id="id" value="12" &gt;
               &lt;/td&gt;
               &lt;td&gt;&lt;input type="submit" value="Update" &gt;&lt;/td&gt;
          &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#centralTable {
      width:90%;
      max-width:780px;
      min-width:300px;
      margin:1rem auto;
  }
  
  input, textarea, select {
     max-width:100%;
  }
  </code></pre>
  
  <p>If I adjust the sizing of the <code>size</code> value, the other elements on the page fit the screen as intended, but the <code>size</code> value offsets this. Firebug shows that <code>max-width</code> is applied to the element but the element size does not accord to this. </p>
  
  <h2>EDIT TWO:</h2>
  
  <p>Setting the <code>td</code> element <code>max-width</code> to a <strong>px value</strong> rather than a percentage works, but obviously doesn't adapt to viewport size. </p>
  
  <pre><code>td {
    max-width:200px; /* This works in containing the input size */
  }
  </code></pre>