Firefox中的Bootstrap 4表单选择中断

Question

我网站上的每个选择表单都在Firefox中切断。在Firefox 55.0.3 for Mac（64位）和Windows（32位）中测试，结果相同。

使用Bootstrap 4 beta

这是我的代码：

<div class="form-group">
   <label for="genre">Genre</label>
   <select name="genre" id="genre" class="form-control">
       @foreach ($genres as $genre)
          <option value="{{ $genre->id}}" {{ $selected }}>{{ $genre->name }}</option>
       @endforeach
   </select>
</div>

我一直在网上搜索解决方案，但没有看到有人解决这个问题。

Answer 1

请提供您正在应用于此select和.form-control

的CSS

尝试将此添加到您的CSS

blockquote {
  background: linear-gradient(to right, gray 1.5em, lightgray 1.5em) lightgray;
  display: flex;
  align-items: center;
  padding-left: 2em;
}

blockquote:before {
  content: ' quote';
  padding: 0.5em 0;
  color: white;
  margin: auto 0;
  width: 1.5em;
  writing-mode: vertical-rl;
  transform: scale(-1) translatex(1.9em)
}