[ djdata @ 24.09.2008. 20:13 ] @
Pozdrav svima!

Novi sam na forumu, a i u svijetu web dizajna i imam jedno pitanje.
U html imam formu sa 4 padajuća izbornika i trebam ih stilizirat. Ovo je njen kod:

<form action="">
<select name="find_acc">
<option value="datum_dol" selected="selected">Datum dolaska</option>
<option value="datum_noc">Datum noćenja</option>
<option value="datum_oso">Datum osoba</option>
<option value="lokacija">Lokacija</option>
</select>
</form>

Kako da css-om kontroliram razmak između pojedinih padajućih izbornika, poziciju cijele forme i boju elemenata izbornika (pogotovo boju gumbića kojim otvaramo padajući izbornik, jer to nisam uspio nigdje naći).

Hvala.
[ Nikola Poša @ 24.09.2008. 21:05 ] @
Ako mislish na razmak izmedju opcija, najbolje je da u stilu dodash ovako neshto:
Code:

option {
    padding-bottom: 3px;
}

A ako mislish na razmak izmedju celih select box-ova, samo definishu npr. donju marginu za select box:
Code:

select {
   margin-bottom: 7px;
}

Boju select box-a, a i ceo select box mozhesh da stilizujesh npr. ovako:
Code:

select { 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 10px; 
   border: 1px solid green; 
   background-color: #F0F8FF;
}

Select box je inache deo Windows OS-a, i od toga zavisi i njegov izgled u browser-u, i upravo zbog toga ga je teshko "stilizovati". Npr. ako imash Vistu, select box na tvom kompu ce izgledati drugachije nego kod nekog ko ima XP, ili neki drugi OS. Postoje nachini za promenu celokupnog izgleda elemenata forme, ali je procedura malo komplikovanija i slozhenija, a ako te bash zanima, pokazacu ti jedan primer...
[ djdata @ 26.09.2008. 12:39 ] @
Volio bi primjer ako nije kasno :).
Pretpostavio sam da gumbi za otvaranje padajućeg izbornika nisu podložni stiliziranju css-om pošto ih svaki drugi browser prikazuje drugačije. Dakle, malo browser, malo Windowsi... Ah.

Ovo ostalo je dosta pomoglo, hvala puno.
[ Nikola Poša @ 26.09.2008. 13:28 ] @
Evo pogledaj ovaj screenshot, i obrati pazhnju na select box-ove:



A poshto je suvishe komplikovan i dug kod za tu formu, mozhesh da je preuzmesh odavde, pa prouchavaj shta su sve radili da bi postigli takav efekat... :)
[ djdata @ 26.09.2008. 13:43 ] @
Ipak će uz html/css morat ići i JavaScript, ali to je to! Odlično.

Hvala puno!
[ Nikola Poša @ 26.09.2008. 13:51 ] @
Pa da, shto ne mozhe CSS, mozhe JavaScript. :) Ja sam neke "fore" iz te forme primenio u na ovoj kontakt formi na mom sajtu. :)

Nema na chemu.

Poz!
[ japan @ 26.09.2008. 15:07 ] @
Citat:
Nikola Poša: Pa da, shto ne mozhe CSS, mozhe JavaScript. :)


moze, da ti osakati formu... ;)

ovi select boxovi izgledaju lepo, ali su daleko od onoga kako se pravi select box ponasa. npr. pomeranje sa trenutno otvorenog selecta pomocu tab-a ga ne zatvara, kao ni klik na body dokumenta, pa onda dobijas situaciju kao na slici, i sl...

trebalo bi to jos prilicno doraditi...
[ Nikola Poša @ 26.09.2008. 15:25 ] @
Citat:
japan: moze, da ti osakati formu... ;)

Naravno, ako ga koristish na pogreshan nachin. :)

Tu formu sam poslao samo kao primer, sigurno ima josh nekih slichnih (i boljih) reshenja...