rails bootstrapとselect2でcollection_selectドロップダウンの色とスタイルを変更する

Question

色を変更して、Webアプリケーションのスタイリングの残りの部分と一致するようにレールのドロップダウンをしたいと思います。私はRails、Bootstrap、select2を使用していますが、どこにcssを追加するのか分からず、ドロップダウンのさまざまな部分にアクセスして、それらを色付けしてアプリケーションのデザインの残りの部分に合わせることもできます。

これは、この項目、感謝をスタイリング実現する方法で私に助言してくださいドロップダウン

<%= collection_select(:id, :name, @product, :id, :name,{:include_blank => true},{class: "js-example-basic-single" }) %> 

の実装です。

Answer 1

私はあなたの質問が何であるかわからないので、私はできる限り最善の方法で答えようとします。 app \ assets \ stylesheetsの下にあるapplication.cssファイルにCSSを追加する必要があると思います。次に、すべてのドロップダウンを同じようにカスタマイズしたい場合は、CSSのselectタグを使用できます。ここでは例として、フォント、色、矢印などを変更

select { 
 
    position: relative; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    border-radius: 3px; 
 
    border: none; 
 
    background: #f1f1f1; 
 
    padding: 2px; 
 
} 
 
    
 
select:hover { 
 
    background-color: dodgerblue; 
 
}

<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select>