CODEWITHSUNDEEP
htmlcss
Martin
Martin

Reputation: 22760

Can CSS over-rule HTML input size declarations

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

Upvotes: 4

Views: 3813

Answers (2)

Martin
Martin

Reputation: 22760

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.

Upvotes: 1

chazsolo
chazsolo

Reputation: 8439

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>

Upvotes: 5

Related Questions