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 に答える