Chcę użyć obrazu jako tła zaznaczenia/menu rozwijanego. Poniższy CSS działa prawidłowo w Firefox i IE, ale nie w Chrome:Obraz tła dla opcji Wybierz (rozwijane) nie działa w przeglądarce Chrome.
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
Generalnie to uważane za złą praktyką do standardowych kontrolek stylu ponieważ wyjście wygląda tak różne na każdej przeglądarce. Zobacz: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ dla niektórych wyrenderowanych przykładów.
Powiedział, że miałem trochę szczęścia podejmowania kolor tła wartości RGBA:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #d00;
}
select {
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<select>
<option>Foo</option>
<option>Bar</option>
<option>Something longer</option>
</body>
</html>
Google Chrome nadal czyni gradient na górze obrazu tła w kolorze, który możesz przekazać do RGBA (r, g, b, 0,1), ale wybór koloru, który komplementuje obraz i uczynienie alfa 0,1, zmniejsza efekt tego.
To, co powiedział Arne - nie można w niezawodny sposób wybierać pól wyboru i mieć je podobne do spójnych w różnych przeglądarkach.
Jednolita: https://github.com/pixelmatrix/uniform to rozwiązanie javascript, które zapewnia dobrą kontrolę graficzną nad elementami formularza - wciąż jest to Javascript, ale jest tak samo dobry jak javascript dla rozwiązania tego problemu.
dzięki za ten klejnot. moje życie stało się łatwiejsze dzięki – heymrcarter
dzięki. bardzo dobrze ... – AEMLoviji
select
{
-webkit-appearance: none;
}
Jeśli chcesz, możesz również dodać obraz zawierający strzałkę jako część tła.
można użyć poniższy stylów CSS dla wszystkich przeglądarkach z wyjątkiem Firefox 30
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
stronę Demo - http://kvijayanand.in/jquery-plugin/test.html
Updated
tutaj jest rozwiązanie dla Firefoksa 30. małej sztuczki na zlecenie wybierz elementy w pseudo-klasie firefox: -moz-any() css.
Dodanie wysokości linii do klasy zastosowanej do wybranego elementu rozwiązuje problem. Dzięki. –