Skip to content
Related Articles

Related Articles

Improve Article

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>

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

Same width input and select option

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :