CODEWITHSUNDEEP
htmlcss
user4002542
user4002542

Reputation:

Stylize select drop down tag

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

http://codepen.io/anon/pen/Pqwpdm

<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! :).

Upvotes: 0

Views: 75

Answers (1)

itsmejoeeey
itsmejoeeey

Reputation: 310

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

Upvotes: 2

Related Questions