html - 如何使不同类型的输入元素具有相同的宽度？

Question

.form-control, .custom-select {
    /* center form controls */
    display: inline-block;
    /* override Bootstrap's 100% width for form controls */
    width: auto;
}

<form action="/" method='post'>
    <br>
    <div class="form-group">
      <select name="show_ID" required="required" class="custom-select">
        <option selected>Select something</option>
        <option value="Something1">Something 1</option>
        <option value="Something2">Something 2</option>
      </select>
    </div>

  </div>
    <div class="form-group">
      <input class="form-control" name="something2" placeholder="Something 2" type="text"/>
    </div>
</form>

这里感兴趣的是两个 Bootstrap 元素 .form-control 和 .custom-select。每个选择框的 HTML 如下所示，尽管每个选择框的选项文本长度不同:

如您所见，自定义选择框中的表单框彼此不匹配，表单控制框也不匹配，即使两者具有完全相同的样式规范。

我猜发生了什么事是自动在文本框上工作，因为没有预先存在的文本来调整文本框的大小，但是自动转换为“基于内容”在文本框上有预先-现有文本(即自定义选择)。

表单控件的自动调整大小在一个仅使用表单控件的 HTML 页面上运行良好，但在另一个页面上我需要同时使用表单控件和自定义选择，这就是大小成为问题的地方。我已经尝试为自定义选择设置特定大小(例如 65%)，但即使我找到了一种方法来匹配桌面上的不同框大小(所有自定义选择框与表单控制框)，在在移动设备上，他们再次关闭，因为自动意味着不同于手机上的 65%。

我怎样才能使所有盒子的大小相同 - 无论是在桌面设备还是移动设备上？

Answer 1

试试这个:它对我有用。

[Here You Go:][1]


  [1]: https://jsfiddle.net/whr4yc9v/1/