CSS styling in use for hidden inputs? Why?

While debugging the cause for some vertical margin in the content area after a form field I noticed that all hidden inputs seem to have the following CSS style:

input, textarea {
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    box-sizing: border-box;
    color: #666;
    font: 100% Arial,Helvetica,sans-serif;
    padding: 7px 6px;
    width: 100%;
}

Maybe the hidden inputs inherit this CSS style because they have no specific CSS style defined for themselves? The padding seems to have at least some noticeable effect not only showing for the input field I was debugging. For example the search input field also has a hidden input and if I disable the padding attribute in Firebug for the hidden input I see a noticeable difference.

Am I missing the reason for the CSS styling for the hidden inputs or is it a bug (in this case both in 1.X and 2.X; showing up at least with Aalborg theme; Firefox used).

  • since hidden fields are not intended to have any visual effect in the browser at all (as far as i am aware) i imagine that it was not considered that applying css to all inputs would cause any issues via hidden inputs. i just tested your idea in firefox by copying the padding value for all inputs (padding: 6px 7px) to the 'search-input' field in the elgg.org site (using firefox inspector) and then disabling the source padding value for all inputs. the result was that nothing changed on the page. how are you testing the issue you are seeing?

  • I don't think any of these would have effect unless the input display is set to block or inline-block. Perhaps we should just set display and visibility to none on input [type="hidden"]

  • ..., or globally:

    [hidden] {
      display: none;
    }
  • @ura I've not added any CSS styles. The styles are already there and used by the hidden input fields. You can test by investigating the CSS attributes of a hidden input in the browser using the integrated developer tools of Firefox or Chrome. Investigating an element gives you all the CSS attributes of an element in use and you can also modify the values or enable/disable the attribute. For example you can investigate the search box element to get an element near a hidden input. Then you can select the hidden input in the developer tools to see the CSS used by it. All hidden inputs I've checked yesterday had the padding set and by disabling this attribute there was a visible difference on the page for some.

    @Ismayil Yes. I guess the problem is caused by not setting anything explicitely for the hidden inputs.

  • that is exactly the test that i did in firefox in the inspector and for me, i saw no change when the padding was removed from the hidden element.

  • are you sure you aren't disabling the padding that effects ALL inputs while attempting to check just the hidden ones? if you disable 'padding' for the CSS declaration that you quoted in your original post here, then it will disable padding for all inputs, including the non hidden ones.. this would result in a visual change on the page.

  • @iionly - this is a non-issue.  The padding/margin of a hidden input don't change anything in the page.  When you disable it in the developer tools you are seeing the page change because you are disabling it for all matching elements which is all inputs on the page, not just the hidden ones.  It's the change from removing it from the visible elements that you are seeing.

  • Yes. My fault. Don't try getting anything useful done if you are too tired already after a long day at work! Tinymce editor instances are added on top of the textarea inputs. That's the origin of the padding and not the hidden inputs. Now I need to sort it out when I feel more rested.