CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrap-3select2-rails
akaras222
akaras222

Reputation: 81

Changing colors and styling of collection_select dropdown with rails bootstrap and select2 implemented

I want to change the colors and style a dropdown in rails to match the rest of my web app styling. I am using Rails, Bootstrap, and select2 and I have no idea where to add css and how to even begin accessing the the different parts of the dropdown so that I can color them and make them fit with the rest of the design on the app.

this is the implementation of the dropdown 

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

Please advise me on how to accomplish styling this item, thanks.

Upvotes: 0

Views: 1827

Answers (2)

Joe Bloggos
Joe Bloggos

Reputation: 889

Quick update

adding the below worked for me... suprising this isnt in the bootstrap gem

select {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Upvotes: 0

Santi Gallego
Santi Gallego

Reputation: 202

I'm not sure what your question is so I will try to answer it as best as I can. I believe you should be adding your CSS to the application.css file that should be under app\assets\stylesheets. Then if you want to customize all your dropdowns the same you can use the select tag in css. Here is an example

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>

Upvotes: 1

Related Questions