Is there anyway to style select tag?

Question

I want to change the arrow size and color. Is there any way doing this with css?

Here's my code;

  <div class="gecesayisi">
        <p>Nights</p>
        <select>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="4">5</option>
         </select>

  </div>

Select's background is black. In chrome I can't see the arrow but in mozilla I can by the way.

[select2](http://ivaynberg.github.io/select2/) is your friend. — moonwave99, Feb 27 '14 at 11:47
Bullet? What bullet? `select`/`option` elements don't have bullets. — George, Feb 27 '14 at 11:49

score 2 · Answer 1 · answered Feb 27 '14 at 12:11

There are ways of styling it but it's browser dependant.

Take a look at this article for more information.

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -moz-appearance: none;
   -webkit-appearance: none;
}

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #ddd;
   border: 1px solid #ccc;
}

score 0 · Answer 2 · edited Feb 27 '14 at 11:54

0

To add the following line to your css file.

select{font-size:xx px; background-color:#xxx}

edited Feb 27 '14 at 11:54

SW4

69,876
20
132
137

answered Feb 27 '14 at 11:51

Giri

9
2

score 0 · Answer 3 · answered Feb 27 '14 at 14:02

0

This is the product I prefer: http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

answered Feb 27 '14 at 14:02

lharby

3,057
5
24
56

Is there anyway to style select tag?

3 Answers3