2014-05-18 17 views
8

Mam stronę internetową zawierającą obraz tła. Następnie znajduje się pole kombi do filtrowania niektórych treści. Chcę utworzyć tło tego wyboru - opcja jest przezroczysta. Czytałem wiele wyników w google, aby użyć opcji zaznaczenia na CSS, ale to nie zadziałało. Stworzyłem tutaj skrzypce: http://jsfiddle.net/25CQE/5For example i jak widać, tło opcji nie jest przezroczyste. Więc jakikolwiek pomysł, jak to rozwiązać? Czy nie może tego zrobić CSS?CSS dla opcji Wybierz jako przezroczyste tło

Przepraszam za mój zły język angielski

Odpowiedz

4

Jeśli chcesz, aby w pełni przejrzyste, niż używać

select { 
    border: 1px solid #fff; 
    background-color: transparent; 
} 

Demo


Jeśli szukasz mieć półprzezroczyste kolor tła, niż można użyć rgba() gdzie a oznacza alfa

select { 
    border: 1px solid #fff; 
    background-color: rgba(255,255,255,.5); 
    padding: 5px; 
} 

Demo 2

+3

Niestety, ale to akurat select, a nie opcją zbyt .. Chcę ch ange obie (wybierz i opcja jest przezroczysta) –

+0

@CrossVander niż użyj niestandardowego menu rozwijanego, takiego jak http://designwithpc.com/Plugins/ddSlick –

+1

@CrossVander, ponieważ przezroczystość działa tylko w przypadku płaskich środowisk http://jsfiddle.net/ 25CQE/6/ –

0

Wystarczy dodać

select {background:transparent;} 

--edit dodatkowy -

wont być w stanie projektować opcje, ponieważ wchodzą one w styl z os lub przeglądarki. Można spróbować javascript rozwiązanie dla ładniejszych elementów formularzy, takich jak http://uniformjs.com/ - można wtedy używać przezroczysty obraz może

+0

Przepraszam, ale tak się stało z wyborem, a nie opcją. Chcę je zmienić (wybierz i opcja jest przezroczysta) –

+0

Edytowane powyżej. Nie jest to możliwe z CSS –

0

można zmienić kolor wybranej opcji w pliku css lub stylu, w następujący sposób:

select option { 
    background-color: transparent; 
} 

lub głównego wybrać wejście

select { 
    background-color: transparent; 
} 

demo

+0

Nie, to nie może być przezroczyste ... spójrz na to: http://codepen.io/anon/pen/NRvBOL –

+0

@CrossVander ma rację, jeśli opcja jest przezroczysta, tło używany jest kolor zaznaczenia. Ale jeśli oba są przezroczyste, wówczas część rozwijana będzie biała. Nie jestem pewien, czy to błąd, czy działa zgodnie z założeniami. Również mi się to nie podoba. :) –

+0

@CrossVander mają rację! to nie działa dla chrome (wersja 62.0.3202.62 (oficjalna kompilacja) (64-bit)). Niektóre fora mówią: use -webkit-appearance: none! Important; important; ale to nie działa dla mnie. W przypadku firefox działa poprawnie! – 3p3ch3