IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Snorlax
Tvůrce
Avatar
Snorlax:19.10.2013 0:35

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ó
Tvůrce
Avatar
Ľuboš Čurgó:19.10.2013 1:12

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
Tvůrce
Avatar
Odpovídá na Ľuboš Čurgó
Snorlax:19.10.2013 10:29

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
Tvůrce
Avatar
Odpovídá na Ľuboš Čurgó
Honza Bittner:19.10.2013 10:38

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Snorlax
Honza Bittner:19.10.2013 10:43

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Snorlax
Tvůrce
Avatar
Odpovídá na Honza Bittner
Snorlax:19.10.2013 11:21

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
Tvůrce
Avatar
Odpovídá na Snorlax
Honza Bittner:19.10.2013 12:29

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

Nahoru Odpovědět
19.10.2013 12:29
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Snorlax
Tvůrce
Avatar
Odpovídá na Honza Bittner
Snorlax:19.10.2013 13:29

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
Tvůrce
Avatar
Odpovídá na Snorlax
Honza Bittner:19.10.2013 17:07

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Snorlax
Tvůrce
Avatar
Odpovídá na Honza Bittner
Snorlax:19.10.2013 19:50

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.