css - Select arrow - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css

Bruger #16906 @ 20.03.12 14:18

Hej alle.

Jeg har et problem med firefox, når man har lavet følgende

HTML kode

 <select>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
 </select>

Er der en pil ned, hvordan får jeg den fjernet.
- jeg har forsøgt at fjerne den med følgende css kode:

CSS kode

 -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;

Som åbenbart ikke virker.
- Måde Google Chrome, Safari, IE (nyeste) virker det i, men ikke firefox.

Any ideas ?

- Kasper

3 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #17118 @ 20.03.12 14:32

Pil ned af ? det er da standard i option - ellers søg efter muligheder på google.

Ellers prøv.

CSS kode

 select {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url(../images/select-arrow.png), 
     -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: center right;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 0;
   overflow: hidden;
   padding-top: 2px;
   padding-bottom: 2px;
   text-overflow: ellipsis;
   white-space: nowrap;}

Bruger #11946 @ 20.03.12 14:38

Pil ned? Jeg forstår ikke hvad du mener

Bruger #12836 @ 20.03.12 14:39

857

Hej Kasper,

Hax løsninger:
- Gør Select boxen for lille.
- Lav pilen til et transperent image.
http://bavotasan.com/2011/style-select-box-using-only-css/

Alternativt:
http://cssglobe.com/post/8802/custom-styling-of-the-select-elements

Med venlig hilsen
Ieet

Indlæg senest redigeret d. 20.03.2012 14:41 af Bruger #12836

Select arrow

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler