Question

简而言之，此fiddle在Firefox上可以正常工作，但在Chrome上却无法正常工作。

与选择具有相同样式的输入应该具有相同的高度，但是在Chrome上不存在，我该如何解决？

经过进一步检查，它似乎与溢出属性有关，不知道为什么

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.my-custom-forms {
    font-family: 'Open Sans',serif;
}
select.my-custom-forms, input.my-custom-forms{
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
    overflow: auto;
    width: 100%;
    background-color: transparent;
    transition: border .5s ease;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="my-custom-forms">
    </div>
  </div>
</div>

我将Bootstrap用作准系统，但不确定是否与问题相关。

Answer 1

问题是用户代理样式表上定义的overflow: visible !important元素的<select>。您不能在<select>元素本身上使用CSS或内联样式来覆盖此规则。

以下CSS规则一直处于活动状态：

select:not(:-internal-list-box) {
    overflow: visible !important;
}

如果将.my-custom-forms的溢出设置为visible（与<select>元素相同），则所有控件的高度都相同。

因此，您可以使用以下解决方案（使用当前代码）：

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.my-custom-forms {
  font-family: 'Open Sans',serif;
}

select.my-custom-forms, input.my-custom-forms {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid lightblue;
  border-radius: 0;
  overflow: visible;
  padding: 0.25rem 0.1rem;
  transition: border 0.5s ease;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="my-custom-forms">
    </div>
  </div>
</div>

我还建议在相应元素上使用.form-row和.form-control类。现在，您可以覆盖CSS规则select.form-control:not([size]):not([multiple])，这样就不会计算<select>元素的高度，而是取决于指定的padding：

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.my-custom-forms {
  font-family: 'Open Sans',serif;
}

select.form-control.my-custom-forms:not([size]):not([multiple]) {
  height: auto !important;
}

select.my-custom-forms, input.my-custom-forms {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid lightblue;
  border-radius: 0;
  overflow: visible;
  padding: 0.25rem 0.1rem;
  transition: border 0.5s ease;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="form-row">
    <div class="col-3">
      <select class="form-control my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="form-control my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input class="form-control my-custom-forms" placeholder="text" type="text">
    </div>
  </div>
</div>

Answer 2

将它们分开。

select.my-custom-forms {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
    overflow: auto;
    width: 100%;
    background-color: transparent;
    transition: border .5s ease;
}

input.my-custom-forms {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
}

Answer 3

覆盖用户代理样式并获得跨浏览器的解决方案总是很棘手。当您使用Bootstrap 4进行操作时，已经完成了辛勤的工作。您可以使用它们。

您可以使用form-control类，该类自动自动应用这些样式（可以通过检查元素进行检查）：

select.form-control:not([size]):not([multiple]) {
    height: calc(2.25rem + 2px);
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

因此，您只需要使用form-control类来覆盖 Chrome和Firefox的用户代理样式-请参见摘要：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="form-control">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="form-control">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="form-control">
    </div>
  </div>
</div>

Chrome使用自定义样式为文本输入添加了意外填充

3 个答案: