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 */
}

you'd better ask it as `php` tagged question and to get help of commiting php-script that will parse all html-files and remove unwanted attributes from input tags — Banzay, Dec 31 '16 at 15:36
@Banzay in his profile it says he's been writing PHP for 15 years. If the OP wanted to use PHP, it would be my guess that he wouldn't be asking this question :P — Jacob G, Dec 31 '16 at 15:39
if I'm going to have to fiddle with the PHP on each and every occurance then I might as well just edit the original size value. — Martin, Dec 31 '16 at 15:41

score 5 · Answer 1 · edited May 23 '17 at 11:53

5

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>

edited May 23 '17 at 11:53

Community

1
1

answered Dec 31 '16 at 15:38

chazsolo

7,873
1
20
44

but `max-width` doesn't seem to apply the required effect, is it only `width` specific? – Martin Dec 31 '16 at 15:39
Not being able to see your layout, it's hard to tell, but it works with max-width too. Using `max-width: 100%;` is probably the issue. Try setting the width of the input's parent, or using a `px` value. I've updated the question to show those examples. – chazsolo Dec 31 '16 at 15:40
I can categorically state that the `size` attribute of the input element is causing the issue. As it's in a table the parent is the `` and this is a percentage size, I will update my question with more details. cheers. – Martin Dec 31 '16 at 15:48
using percentages as a max/min width value in CSS doesn't seem to effect the size value. – Martin Dec 31 '16 at 16:08

Martin · Accepted Answer · 2016-12-31T16:22:34.807

OK, I think I've got it:

The table elements are set to take a percentage size but the nature of tables is that they expand to fit their contents, and the contents is set to take a maximum of 100% of the table size, so:

Size sets input elements size:
Table cell expands to encase input element
CSS input sets the input to fill table cell

So; Using a Viewport Width as a value gives a more absolute container for the size to sit into.

#centralTable input, #centralTable textarea, #centralTable select {
    max-width:65vw;
}

This limiter, rather than a percentage limiter, then correctly resizes the child input size value.

Viewport width units should be used in preference to percentage sizes.

Thanks for adding your html to the question, it was hard to visualize what you were doing. Makes sense now! — chazsolo, Dec 31 '16 at 17:36

Can CSS over-rule HTML input size declarations

EDIT

EDIT TWO:

2 Answers2