How to make input and select elements to be same width?
As a beginner, while working with CSS and HTML, you may have noticed a problem with the form elements like input and select that when the output is opened in the browser, both elements are not having the same width. It would not look properly aligned to the user.
To create the inputs of the same width, we have to use some CSS attributes in our program.
- box-sizing: It defines how the height and width of the element are calculated.
- moz-box-sizing: It is supported in the Mozilla Firefox browser only.
- -webkit-box-sizing: It is supported in the Google Chrome browser only.
Example: In the following CSS code we create both the elements of the same width. Below is the code for CSS in which we will use some attributes which were discussed earlier.
Output: The following output is only shown in the Mozilla Firefox and Microsoft Edge.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.