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

Last Updated : 27 Apr, 2021

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Input and Select Elements with same width 
    </title> 
  
    <!-- CSS stylesheet-->
    <style> 
        input, 
        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; 
        } 
    </style> 
  
</head> 
  
<!--body tag starts here-->
  
<body> 
    <h2 style="color:green">GeeksforGeeks</h2> 
    <input type="text" 
           name="Input Element" 
           id="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> 
    </select> 
</body> 
<!--body tag ends here-->
  
</html>