Can CSS over-rule HTML input size declarations

Question

I have inherited a website that has many inputs on various pages, such as:

<input name="name" type="text" id="name" size="40" maxlength="64">

and

<textarea name="descr" cols="40" rows="2" id="descr">

I have been improving the CSS of the site to make it flexible layout for mobile devices, etc. But the size/cols rules of the HTML persists in setting the fixed size, regardless of outside factors.

I have tried using CSS such as:

CSS:

input, textarea, select {
    max-width:100%;
}

(And with also appending !important) but this doesn't effect the elements.

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).

Is there a way that CSS can overwrite the HTML size/cols declaration in the inputs?

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 :-/.

EDIT

Full Code:

HTML:

<table id='centralTable'>
       <tr>
             <td colspan="2">Update Category</td>
       </tr>
       <tr>
             <td width="28%"><strong><label for='name'>Category Name</label></strong></td>
              <td width="70%"><input name="name" type="text" id="name" value="catname" size="40" maxlength="40" required></td>
      </tr>
       <tr>
             <td><input name="id" type="hidden" id="id" value="12" >
             </td>
             <td><input type="submit" value="Update" ></td>
        </tr>
  </table>

CSS:

#centralTable {
    width:90%;
    max-width:780px;
    min-width:300px;
    margin:1rem auto;
}

input, textarea, select {
   max-width:100%;
}

If I adjust the sizing of the size value, the other elements on the page fit the screen as intended, but the size value offsets this. Firebug shows that max-width is applied to the element but the element size does not accord to this.

EDIT TWO:

Setting the td element max-width to a px value rather than a percentage works, but obviously doesn't adapt to viewport size.

td {
  max-width:200px; /* This works in containing the input size */
}

Answer 1

CSS can override the size attribute using width. There's a good explanation about it here.

Here, we have a typical input, size 10:

<input type="text" size="10">

And here is that same input, adjusted with CSS

input {
  width: 20px;
}

<input type="text" size="10">

max-width is also a viable option, depending on the circumstance

div {
  width: 20px;
}

input {
  max-width: 100%;
}

<div>
  <input type="text" size="10">
</div>