How do you center text in a select drop down menu, style the drop down and add a down arrow?

Question

This is killing me. I have 2 select menus that I need to center the text. I've tried varieties of text-align: center, margin: 0 auto, etc. I can't use padding because all of the element's names are different sizes. Any thoughts?

Here is the rails piece of code that makes a select drop down.

<%= collection_select(:id, :name, @restaurants, :id, :name, prompt: "select a restaurant") %>

Here is what the code looks like when produced in html.

<select id="id_name" name="id[name]"><option value="">select a restaurant</option>
  <option value="5">Jamba</option>
  <option value="4">Smokey Joes</option>
  <option value="3">Arbys</option>
  <option value="1">McDonalds</option>
<option value="2">Burger King</option></select>

Current styling. Every time I tried to style option, it did nothing.

.filters{
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 10px;
  width: 280px;
  select {
    background-color: rgba(255,255,255,0.71);
    background:-webkit-linear-gradient(bottom,rgba(255,255,255,0.71) 71%, rgba(255,255,255,0.71) 71%);
    background:-o-linear-gradient(bottom,rgba(255,255,255,0.71) 71%, rgba(255,255,255,0.71) 71%);
    background:-moz-linear-gradient(bottom,rgba(255,255,255,0.71) 71%, rgba(255,255,255,0.71) 71%);
    border: 1px solid #fff;
    border-radius: 0;
    color: #553705;
    font-size: 18px;
    height: 48px;
    margin-top: -4px;
    padding: 10px 5px;
    width: 100%;
    -webkit-appearance: none;
    &:hover{
       cursor: pointer;
    }
   }
 }

I also need to add a little drop down arrow in the select, but not sure what element to put the :after on. Here is ideally how I would like the site to look:

enter image description here

Any other thoughts on styling the options would be appreciated too. Right now when I open it, it opens slightly to the side. Here is a picture

enter image description here

Browsers greatly limit the amount of styling we can perform on `select` and `option` tags. — Kevin Boucher, Nov 04 '14 at 21:50

Luis · Answer 1 · 2014-11-04T23:19:29.540

0

Its posible with:

select { width: 400px; text-align:center; } select > option { text-center !important; }

edited Nov 04 '14 at 23:19

answered Nov 04 '14 at 21:36

Luis

535
2
14

I would like to center it, not just put padding on the side since a lot of the restaurant names are different sizes. – LMo Nov 04 '14 at 21:52
– Luis Nov 04 '14 at 21:58
or select > option { text-center !important; } change for option { text-center !important; } – Luis Nov 04 '14 at 21:59
it served? for you question? – Luis Nov 04 '14 at 23:18

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

Based on this response, https://stackoverflow.com/a/10813603/1949363, it seems not possible to achieve what you need in vanilla CSS. The mentioned post recommends using a jQuery plugin as an option, which doesn't sound all that fun.

edited May 23 '17 at 10:25

Community

1
1

answered Nov 04 '14 at 21:51

srt32

1,260
1
14
27

How do you center text in a select drop down menu, style the drop down and add a down arrow?

2 Answers2