Question

I have a problem using a given CSS file I don’t want to change. In this file there is a format for inputs:

input {
  display:inline-block;
  width:60%;
}

Now I want to use an additional CSS file and change this formatting to a normal block element width full width:

input {
  display:block !important;
  width:auto !important;
}

Unfortunately, this doesn’t work. Unlike normal block elements, the input does not take all the available horizontal space with this setting. It is only as long as it would be as inline element. Additionally, I cannot use width:100%; due to padding, borders and margin. In my desperation I already tried something like width:none;, but I couldn’t find a way to reset the width to a block element’s default value.

I really hope that somebody can help me. Thank you in advance.

Answer 1

You must use width: 100%, so my answer shows how to fix the problems you’re having with it.

https://developer.mozilla.org/en/CSS/box-sizing

input {
    width: 100%;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

If margin is required, then wrap the input in another element and apply the margin to that.