如何使输入和选择元素具有相同的宽度？

作为初学者，在使用CSS和HTML 时，您可能已经注意到 input 和 select 等表单元素的问题，当在浏览器中打开输出时，两个元素的宽度不同。它看起来不会与用户正确对齐。

在本文中，我们将学习如何使 input 和 select 元素具有相同的宽度和高度。

要创建相同宽度的输入，我们必须在我们的程序中使用一些 CSS 属性。

• box-sizing：它定义了如何计算元素的高度和宽度。
• moz-box-sizing：仅在 Mozilla Firefox 浏览器中受支持。
• -webkit-box-sizing：仅在 Google Chrome 浏览器中受支持。

示例：在以下 CSS 代码中，我们创建了两个宽度相同的元素。下面是 CSS 代码，我们将在其中使用之前讨论过的一些属性。

HTML

  

    
  
    
    
  

  

  

    
GeeksforGeeks
    

  
    
        Select an option
        Option 1
        Option 2
    


  

输出：以下输出仅在 Mozilla Firefox 和 Microsoft Edge 中显示。

相同宽度输入和选择选项