9

为了在 OS X 中的 Chrome 上获得我想要的样式，我必须使用该-webkit-appearance: none;属性。

看到这个问题和这个答案。

问题是，现在当我选择一个答案时，它不会出现。该字段保持空白。

这是没有该属性的外观：

无属性

这是它与属性的外观：

带属性

对于它的价值，这就是我创建这个选择菜单的方式 - 使用简单形式：

<%= f.input_field :country_id, collection: Piggybak::Country.send(type), class: "required" %>

这是它生成的 HTML：

<select class="select required required valid" id="piggybak_order_billing_address_attributes_country_id" name="piggybak_order[billing_address_attributes][country_id]"><option value=""></option>
<option value="231" selected="selected">United States</option></select>

我该如何解决？

编辑 1

这是CSS：

form.simple_form select {
    padding: 20px;
    -webkit-appearance: none;
}
4

5 回答 5

9

我遇到了这个问题，结果证明是导致它的高度属性。

select {
    padding: 20px;
    height: 20px; /* suddenly invisible text! */
    -webkit-appearance: none;
}

看看这个小提琴 http://jsfiddle.net/bpYGv/2/

于 2013-09-15T18:50:29.183 回答
5

在 Chrome for OSX (10.8.2) 中测试，这工作正常：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Testing Select</title>
  <style>
    form.simple_form select {
      padding: 20px;
      -webkit-appearance: none;
    }
  </style>
</head>
<body>
  <form class="simple_form">
    <select class="select required required valid" id="piggybak_order_billing_address_attributes_country_id" name="piggybak_order[billing_address_attributes][country_id]">
      <option value="">test</option>
      <option value="231" selected="selected">United States</option>
    </select>
  </form>
</body>
</html>

您有一个空选项作为第一个选项。这就是你得到空白选择的原因。

于 2013-05-22T14:34:05.053 回答
2

如果我开始一个新的 HTML 页面（在 Mac Chrome 和 Safari 上），这个问题是不可重现的。对我来说，这听起来像是一个冲突的 CSS 规则问题。样式是否color: #fff;在使用的类之一中定义select？您可能想尝试检查 Chrome/Safari 中的selectoroption元素，看看是否有任何类应用了该样式。

于 2013-05-28T08:03:15.157 回答
0

填充将选择的内容推到视野之外，请尝试减少 Chrome 网络检查器中的填充以使其再次出现。

一个解决方案可能是硬设置填充和高度，即。

-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #aaa;
padding: 20px;
font: 12px/12px Arial;
height: 57px;

但是字母的底部像素在不同的浏览器中仍然容易脱落，53px 的高度应该足够了（2*border + 2*padding + 1*line-height），但是 Chrome 34 需要 55px，IE11 56px 和 FF28 57px 才能完全显示字母。

在http://jsfiddle.net/lmeurs/tLkAR/上查看我的小提琴。

另请参阅Formalize以“教您的表单一些礼仪”和Select以了解“可样式化的选择元素”。

于 2014-04-24T12:33:32.240 回答
0

对我来说，我必须设置这个：

padding-top: 0;
padding-bottom: 0;
于 2019-07-21T14:53:33.393 回答