How to fix HTML input textbox with a width of 100% overflowing table cells with CSS?

Spread the love

Sometimes, we want to fix HTML input textbox with a width of 100% overflowing table cells with CSS.

In this article, we’ll look at how to fix HTML input textbox with a width of 100% overflowing table cells with CSS.

How to fix HTML input textbox with a width of 100% overflowing table cells with CSS?

To fix HTML input textbox with a width of 100% overflowing table cells with CSS, we set the box-sizing property.

For instance, we write

input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

to set the box-sizing property to border-box to stop the input from overflowing the table cell when it’s 100% width.

Conclusion

To fix HTML input textbox with a width of 100% overflowing table cells with CSS, we set the box-sizing property.

Leave a Reply

Your email address will not be published. Required fields are marked *