Question

我有一个html选择标记并添加了25px的填充但是当我这样做时，文本消失了。如何填充，但文本仍然可见？

这是我的代码。

CSS

.signup-field {
  border-radius: 30px;
  padding: 25px;
}

HTML

<div class="col-sm-12 col-md-6"> <div class="form-group"> <h4 style="color:white; margin-left:20px; margin-bottom:10px;">How did you hear about us?</h4> <select class="form-control signup-field" style=""id="sel1"> <option>1</option> <option>2</option> </select> </div> </div>

Answer 1

Select元素不像其他块级元素那样响应填充 - 我希望我知道为什么。如果您要添加垂直填充，只需将padding替换为height，然后添加垂直空间即可。

另一个选项是使用appearance规则禁用某些默认浏览器样式：

.signup-field {
  border-radius: 30px;
  padding: 25px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

您可以在此处快速查看和播放快速演示：https://codepen.io/anon/pen/mWZvWE

为了更广泛地解释在设置select元素样式时可行和不可能的内容，CSS Tricks有一个很好的入门：https://css-tricks.com/dropdown-default-styling/

修改

对于Bootstrap，您实际上需要使用这两种解决方案。即使使用appearance规则，向select元素添加额外的填充也会将值推到元素的可见帧之外。但是，如果您应用填充，然后应用高度，则会展开可见框，将所选值重新显示。

以下是相同代码笔的更新版本：https://codepen.io/anon/pen/mWZvWE

Answer 2

如果没有明智地选择数字，边界半径和填充可能不会很好。在您的示例中，如果边框半径超出填充。你可以尝试利润，这肯定会更好。但是，我自己没有尝试过。为了确保您可以将这些添加到您的css文件

.signup-field {
  background: #fff;
  text-align: center;
  border-radius: 30px;
  padding: 25px;
}

HTML选择填充文本问题

2 个答案:

修改