Open In App

How to make input and select elements to be same width?

Last Updated : 27 Apr, 2021
Like Article

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. 

In this article, we would be learning how to make the input and select elements to be of the same width and height.

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.


<!DOCTYPE html>
        Input and Select Elements with same width
    <!-- CSS stylesheet-->
        select {
            width: 200px;
            height: 25px;
            margin: 2px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        body {
            background-color: tomato;
<!--body tag starts here-->
    <h2 style="color:green">GeeksforGeeks</h2>
    <input type="text" 
           name="Input Element" 
           value="Input Element"><br>
    <select name="Select Element" id="select_Element">
        <option value="">Select an option</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
<!--body tag ends here-->

Output: The following output is only shown in the Mozilla Firefox and Microsoft Edge.

Same width input and select option

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads