Forum PHP.pl > [JavaScript][HTML][CSS]TŁO POD Pole typu: <select>

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML][CSS]TŁO POD Pole typu: <select>

miras

31.05.2012, 17:28:25

Witam, mój problem polega na tym, że potrzebuję zrobić własne tło pod pole formularza typu select czyli pod

[HTML] pobierz, plaintext 
<select>
<option>Opcja1</option>
<option>Opcja2</option>
</select>
 
[HTML] pobierz, plaintext

Czytałem, że za pomocą css, jest to niewykonalne, aczkolwiek zrobiłem po prostu w css'ie background-url: (sciezka.png) i faktycznie nie działa, ale pewnego dnia wszedłem z telefonu i o dziwo działało, ale to tylko taka ciekawostka - jak to najlepiej zrobić ? dodam jeszcze, że pod te selecty mam napisany taki 'kalkulator' więc dobrze by było, żebym nie musiał pisać wszystkiego od nowa..

Dzięki z góry i pozdrawiam!

CTRL

31.05.2012, 17:40:08

Powinno się Ciebie posłuchać jeśli ten select dasz w div do którego przypiszesz css, spróbuj.

miras

31.05.2012, 17:59:50

Niestety nie słucha się...

http://91.228.196.49/

http://91.228.196.49/style.css

Kshyhoo

31.05.2012, 18:01:10

EDIT: Ostatnia może nie działać:

[HTML] pobierz, plaintext 
<option class="bgclass1"> 1 </option>
<option id="idtest1"> 2 </option>
<option style="background-image: url(./obrazek.gif);"> 3 </option>
<option style="background: url(./obrazek.gif);"> 4 </option>
<option background="./obrazek.gif"> 5 </option>
[HTML] pobierz, plaintext

miras

31.05.2012, 18:08:09

No to Cię rozczaruję i powiem, że żadne rozwiązanie nie działa.

Kshyhoo

31.05.2012, 18:13:35

Nie czuję się rozczarowany, bo nie działa tylko u Ciebie ;p
Poszukaj przykład

k_@_m_i_l

31.05.2012, 18:19:48

http://www.queness.com/post/204/25-jquery-...l-form-elements

Zainteresuj się tym. Jest tam kilka bibliotek, które zmieniają wygląd select, radio, checkbox itd. Więc zobacz sobie w kod na jakiej zasadzie to działa (o ile chcesz coś swojego napisać, a nie korzystać z gotowej biblioteki).

miras

31.05.2012, 18:27:47

Cytat(Kshyhoo @ 31.05.2012, 18:13:35 )

Nie czuję się rozczarowany, bo nie działa tylko u Ciebie ;p
Poszukaj przykład

A powinieneś, bo tam nie ma rozwiązania mojego problemu - ja potrzebuję zmienić tło ' ostylować ' select, a nie zmieniać obrazki przy każdej zmianie optiona..

Dobra, dzięki Kamil, mam nadzieję, że uda mi się to połączyć z moim kalkulatorem.

Kshyhoo

31.05.2012, 18:28:13

Cytat(miras @ 31.05.2012, 19:23:08 )

A powinieneś, bo tam nie ma rozwiązania mojego problemu - ja potrzebuję zmienić tło ' ostylować ' select, a nie zmieniać obrazki przy każdej zmianie optiona..

Rozczarowany jestem jedynie Twoim podejściem... przecież takie rozwiązanie Ci podałem - dałem również przykład, który jak widać działa. Już kumam, ja umiem patrzeć tam, gdzie trzeba - wklejam więc to, co widzę:

Cytat

select box
HTML Source

[HTML] pobierz, plaintext 
<select>
	<option class="bgclass1"> Amiga </option>
	<option id="idtest1"> Windows </option>
	<option style="background-image: url(./linux_os_small.gif);"> Linux </option>
	<option style="background: url(./linux_os_small.gif);"> Linux II</option>
	<option background="./freebsd_os_small.gif"> FreeBSD </option>
</select>
[HTML] pobierz, plaintext

miras

31.05.2012, 18:31:24

Nie wiem, 'pewnie się nie znam', ale na mojej przeglądarce (chrome) to nie działa.

Kshyhoo

31.05.2012, 18:34:21

Nikt nie mówi, że się nie znasz. Ctrl + F5

miras

31.05.2012, 18:37:19

Nadal nic, ten sposób byłby o wiele łatwiejszy niż grzebanie się z jquery, no ale czemu nie działa ?

Kshyhoo

31.05.2012, 18:42:42

A to w przykładzie widzisz dobrze?

miras

31.05.2012, 18:55:37

Właśnie też nie..

SS: http://fotoo.pl//out.php/i260394_aaa.gif

Kshyhoo

31.05.2012, 19:04:40

Zrób tak:

[HTML] pobierz, plaintext 
.bgclass1 { background-image: url(./bg1.png); }
 
<option class="bgclass1"> 1 </option>
[HTML] pobierz, plaintext

albo:

[HTML] pobierz, plaintext 
<option style="background-image: url(./bg1.png);"> 3 </option>
[HTML] pobierz, plaintext

miras

31.05.2012, 19:11:14

http://91.228.196.49/

Powiedz mi czy Tobie to działa ?

[HTML] pobierz, plaintext 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head profile="http://gmpg.org/xfn/11">
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="Description" content="test" />
<meta name="Keywords" content="test" />
<meta name="Author" content="test" />
<meta name="Robots" content="ALL" />
<meta name="revisit-after" content="10" />
 
<style>
.bgclass1 { background-image: url(./tlo_select.png); }
</style>
</head>
<body>
 
 
 
 
<form>
<select>
<option class="bgclass1"> 1 </option>
<option class="bgclass1"> 1 </option>
<option class="bgclass1"> 1 </option>
<option class="bgclass1"> 1 </option>
<option class="bgclass1"> 1 </option>
</select>
 
 
</form>				
 
 
 
</body>
</html>
 
[HTML] pobierz, plaintext

Kshyhoo

31.05.2012, 19:21:37

Nie działa, ale działa to:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//en">
<html>
<head>
<title>Demo</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="pl">
<style type="text/css">
.bgclass1 { background-image: url(./bg1.png); }
 
</style>
</head>
<body>
 
<select>
 
<option class="bgclass1"> 1 </option>
<option class="bgclass1"> 2 </option>
<option class="bgclass1"> 3 </option>
<option class="bgclass1"> 4 </option>
<option class="bgclass1"> 5 </option>
</select>
 
</body>
</html>
[HTML] pobierz, plaintext

więc może różnica w <style> / <style type="text/css"> ?

miras

31.05.2012, 19:30:56

Zielonego pojęcia już nie mam w czym leży problem - u Ciebie działa -> ja wkleiłem powyższy kod + tylko zmieniłem ścieżkę tła i nie działa...

http://91.228.196.49/

Kshyhoo

31.05.2012, 19:55:04

U mnie coś widać, jakiś zaokrąglony róg.

miras

31.05.2012, 20:02:07

Sprawdź teraz, dodałem wymiary, ale pomimo wszystko dlaczego u mnie zero reakcji ?

k_@_m_i_l

31.05.2012, 20:05:00

@miras: Pod jaką przeglądarką patrzysz ?

Kshyhoo

31.05.2012, 20:08:27

Ja widzę grafiki. FF.

miras

31.05.2012, 20:42:54

Google Chrome, to jest dość popularna przeglądarka więc raczej wypadałoby, żeby działało na niej..

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.