Stylize select drop down tag

Question

I'm styling a select tag and I wonder if i can take the space on the right, where are the arrows

<header class="navbar">
  <div class="navbar__container">
    <select class="navbar__select">
      <option class="navbar__option">Janeiro, 2015</option>
      <option class="navbar__option">Fevereiro, 2015</option>
      <option class="navbar__option">Março, 2015</option>
      <option class="navbar__option">Abril, 2015</option>
      <option class="navbar__option">Maio, 2015</option>
      <option class="navbar__option">Junho, 2015</option>
      <option class="navbar__option">Julho, 2015</option>
      <option class="navbar__option">Agosto, 2015</option>
      <option class="navbar__option">Setembro, 2015</option>
      <option class="navbar__option">Outubro, 2015</option>
      <option class="navbar__option">Novembro, 2015</option>
      <option class="navbar__option">Dezembro, 2015</option>
    </select>
  </div>
</header>


.navbar__select {
  float: right;
  background: #C9D3DD;
  font-size: 17px;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  padding: 5px;
}

Thanks! :).

What do you mean by space on the right? depending on your operating systtem you'll get a different view of the select box. — filype, Apr 27 '15 at 03:14
there is a space in the right that i can't take off because the arrows of the select are there.. i want take off.. — , Apr 27 '15 at 03:14
It depends what browser you are using. `-webkit-appearance` will only work in chrome and safari. What if you add the following 2 properties: `appearance:none; -moz-appearance:none; /* Firefox */` — filype, Apr 27 '15 at 03:18
well there is another way apply this: to all your option tag: `` — anni, Apr 27 '15 at 03:29
You know what you are having and trying to do is very much against the accessibility, right? — Stickers, Apr 27 '15 at 03:31

score 2 · Accepted Answer · edited May 23 '17 at 11:44

2

This question has already been asked.

To recap:

Use -moz-appearance: none to disable the dropdown arrow in Firefox
Use -webkit-appearance: none to disable the dropdown arrow in Webkit browsers (such as Google Chrome)
Set display: none on the psudo class available for the dropdown arrow in Internet Explorer: ::-ms-expand

edited May 23 '17 at 11:44

Community

1
1

answered Apr 27 '15 at 03:40

itsmejoeeey

302
3
11

That space is there only because the select box is larger than the text within. If you want to change the width of the select box, you can by putting `width: __px;` in the CSS for it. – itsmejoeeey Apr 27 '15 at 05:30

Stylize select drop down tag

1 Answers1