[es] - Css manipulacija padajućim izbornicima (form)

djdata
IT tech & programmer wannabe
Split

Član broj: 195060
Poruke: 10
*.adsl.net.t-com.hr.

Profil

Css manipulacija padajućim izbornicima (form)

^{24.09.2008. u 20:13 - pre 189 meseci}

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.

Meštar od zanata, komandant Data!

Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-a-1.sezampro.yu.

+33 Profil

Re: Css manipulacija padajućim izbornicima (form)

^{24.09.2008. u 21:05 - pre 189 meseci}

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...

Odgovor na temu

djdata
IT tech & programmer wannabe
Split

Član broj: 195060
Poruke: 10
*.adsl.net.t-com.hr.

Profil

Re: Css manipulacija padajućim izbornicima (form)

^{26.09.2008. u 12:39 - pre 189 meseci}

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.

Meštar od zanata, komandant Data!

Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-1.sezampro.yu.

+33 Profil

Re: Css manipulacija padajućim izbornicima (form)

^{26.09.2008. u 13:28 - pre 189 meseci}

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... :)

Odgovor na temu

djdata
IT tech & programmer wannabe
Split

Član broj: 195060
Poruke: 10
*.adsl.net.t-com.hr.

Profil

Re: Css manipulacija padajućim izbornicima (form)

^{26.09.2008. u 13:43 - pre 189 meseci}

Ipak će uz html/css morat ići i JavaScript, ali to je to! Odlično.

Hvala puno!

Meštar od zanata, komandant Data!

Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-1.sezampro.yu.

+33 Profil

Re: Css manipulacija padajućim izbornicima (form)

^{26.09.2008. u 13:51 - pre 189 meseci}

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!

Odgovor na temu

japan

Član broj: 34328
Poruke: 480
*.bvcom.net.

+13 Profil

Re: Css manipulacija padajućim izbornicima (form)

^{26.09.2008. u 15:07 - pre 189 meseci}

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...

Prikačeni fajlovi

Screenshot.png - 11.5k

Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-1.sezampro.yu.

+33 Profil

Re: Css manipulacija padajućim izbornicima (form)

^{26.09.2008. u 15:25 - pre 189 meseci}

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...

Odgovor na temu