Input with display:block is not a block, why not?

html

responsive-design

css

browser-compatibility

byAnton Shumikhin·Nov 16, 2024

An <input> set to display: block should ideally occupy the full width of its container. If it isn't:

CSS Battles: Ensure no other styles are defeating display: block.
Width Control: Enforce width: 100% to make it fill the container.

input[type="text"] {
  display: block;
  width: 100%; /* It's a king-size bed; you get ALL of it! */
  box-sizing: border-box; /* Borders and padding? Bring 'em on! */
}

This CSS piece makes your <input> truly a block in the park.

The twists and turns of box-sizing

The box-sizing CSS property is your key to mastering layouts. It has two modes you should know about:

Content-box: Here, width and height only affect the content area. Padding and borders are extra baggage that adds to the size.
Border-box: In this mode, padding and borders are considered while calculating width and height of an element.

By switching to border-box, you're telling the browser, "Pack everything inside, we're going on a trip!"

Wrapping it up with div

A wrapper div around your input isn't just a pretty suit, it introduces an extra layer of control and styling:

CSS Power: Complex CSS styles can be applied to the wrapper.
JavaScript Mastery: DOM manipulations are smoother when inputs are bundled.

<div class="input-wrapper">
  <input type="text" />
</div>

Consider a div with contenteditable set to true for contextual text input. It behaves like an input but has the flexibility of a div at a hackathon.

Smooth sailing across browsers

Older browsers like Internet Explorer 6 and 7 say box-sizing? No way. But boxsizing.htc is the broom that sweeps this mess away.

<style>
@import "boxsizing.htc";
</style>

When you see browser-specific mishaps, be ready with plan B, C, or Z. You are the browser whisperer.

Take control with padding and borders

To ensure a consistent experience across browsers, ask your inputs and forms to display: block and wear the same uniform. Use padding-left and padding-right to add some breathing space.

input[type="text"] {
  padding-left: 10px; /* Gives a feeling of space */
  padding-right: 10px; /* Because symmetry is beautiful */
  /* Rest is up to you */
}

Overflow: The unexpected guest

You don't want your boxcar (input) to derail from the track (container). To avoid such situations:

Apply Brakes: Limit the max-width of input to 100%.
Clean Tracks: Use overflow: hidden on wrapper to prevent spillage.
Match the Looks: Keep the border styles for div and input identical, because consistency is royal.

Browser bugs and their remedies

There are some peculiarities associated with specific browsers, such as a Firefox 3 bug with max-width on inputs but don't fret, you can adapt and overcome:

Use browser-specific prefixes for box-sizing to ensure compatibility.
Practice positive discrimination by providing tailored solutions for individual browsers.