Diskuze: Pořádné upravení vzhledu formulářů

HTML a CSS HTML a CSS Pořádné upravení vzhledu formulářů American English version English version

Avatar
Snorlax
Redaktor
Avatar
Snorlax:

Zdravím, rád bych se zeptal, zda nevíte náhodou o nějaké stránce nebo o něčem co mi poradí, opravdu pořádnou CSS úpravu formuláře. stačil by select, input type:
text (email)
radio
checkbox
range
number
submit

jiný ani nepoužívám. Ale chci něco víc než změnit šířku. Chtěl bych aby se např. u radia po označení tam nezobrazil ten puntik, ale třeba aby byly všechny červené a vybraný by byl zelený, nebo něco takového. Aby po kliknutí na input text tam nebyl ten ošklivej oranžovej rámeček, ale úprava vzhledu jakou bych chtěl přímo já atd... prostě tak abych ty formuláře naprosto překopal... když jsem hledal tak jsem narazil většinou na malé úpravy nebo jen pro jeden prohlížeč. např toto:

.select/*vzhled selectu*/
{
     -webkit-appearance: button;
     -webkit-border-radius: 2px;
     -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
     -webkit-padding-end: 20px;
     -webkit-padding-start: 2px;
     -webkit-user-select: none;
     -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
     background-image: url(img/arrow.png);
     background-position: center right;
     background-repeat: no-repeat;
     border: 1px solid darkgrey;
     color: darkblue;
     font-size: 17px;
     padding-top: 2px;
     padding-bottom: 2px;
}

funguje mám pocit jen v Opeře a Chromu. ovšem já bych chtěl alepoň i mozillu (pochybuju že IE vůbec někdy přemejšlela nad vzhledem formuláře). pokud tedy víte o nějaké stránce popř. sami víte, budu rád za všechny rady.

Odpovědět 19.10.2013 0:35
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Ľuboš Čurgó
Redaktor
Avatar
Ľuboš Čurgó:

Ak som dobre pochopil tak chces nieco co za teba spravi prefixi, ja pouzivam http://prefixr.com/

 
Nahoru Odpovědět 19.10.2013 1:12
Avatar
Snorlax
Redaktor
Avatar
Odpovídá na Ľuboš Čurgó
Snorlax:

to je ale na úpravu jen tlačítka ne? na to už tady používám místní tlačítkovač.
http://www.itnetwork.cz/…on-generator
spíš by to chtělo možnost překopat ty inputy (hlavně radio, chceckbox a select). type text upravim jako nějakej div, což u těch ostatních mi nešlo... ale i tak díky za tip

Nahoru Odpovědět 19.10.2013 10:29
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Ľuboš Čurgó
Honza Bittner:

Jsi úplně mimo, on nechce generátor prefixů (-webkit-, -o- atp.) ale zjistit jak změnit styl formulářových prvků.

Nahoru Odpovědět 19.10.2013 10:38
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Snorlax
Honza Bittner:

Bohužel to nebude tak jednoduché ... ono se to snad ani nedá stylovat něco ... musíme tedy využívat jiných možností :

Vpodstatě třeba u radio buttonů / volba ze 3 možností:
schováš (display: none) radia a pak upravuješ jejich labely (které mají atribut for="radio1" (radio1 je ID buttonu) atp.)

Využij možnosti používat v CSS + ...
tzn. pak uděláš input[type="ra­dio"]:checked + label { styly labelu }

  • znamená další element label za selektorem(in­put[type="radi­o"]:checked)

= schováš radia a styluješ jejich labely

Editováno 19.10.2013 10:47
Nahoru Odpovědět 19.10.2013 10:43
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Snorlax
Redaktor
Avatar
Odpovídá na Honza Bittner
Snorlax:

s tím že bych místo radio dal button by šlo, ale fungovalo jen za předplokadu že bych měl jen tahkle jen jednou. pokud bych tam jich měl víc tak by to už nešlo ne?
př:
jsi:
O muž
O žena

bydlíš:
O v paneláku
O v rodinném domku
O jinde

to už by nefungovalo (pokud jsem to dobře pochopil)
ale na ten ** input[type="ra­dio"]:checked** se kouknu. dík ;)

Nahoru Odpovědět 19.10.2013 11:21
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Snorlax
Honza Bittner:

né, ty styluješ labely jednotlivých radio buttonů ... to samé při checkboxech ...

Nahoru Odpovědět 19.10.2013 12:29
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Snorlax
Redaktor
Avatar
Odpovídá na Honza Bittner
Snorlax:

aha ok... mohl bys mi pro jistotu uvést nějakej příklad ať sem si jistej jestli to chápu správně? :D dneska mi to nějak nemyslí a náhradní mozek jsem ztratil :[

Nahoru Odpovědět 19.10.2013 13:29
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Snorlax
Honza Bittner:

myslím že nějak takto :

HTML

<input type="radio" id="prvni" name="alfa" />
  <label for="prvni" />
<input type="radio" id="druhy" name="alfa" />
  <label for="druhy" />

CSS

input[type="radio"] { display: none }
label { .. styly pro labely .. }
input[type="radio"]:checked + label { .. styly pro zvoleny radio label .. }
Editováno 19.10.2013 17:07
Nahoru Odpovědět 19.10.2013 17:07
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Snorlax
Redaktor
Avatar
Odpovídá na Honza Bittner
Snorlax:

aha... v životě jsem <label> nepoužil... ok díky ;)

Nahoru Odpovědět 19.10.2013 19:50
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.