| Autor | Zpráva | ||
|---|---|---|---|
| Wreis Profil |
#1 · Zasláno: 16. 5. 2010, 11:01:56
Dobrý den,
mám dotaz. Potřebuji, aby vybraná možnost měla jiný styl, než ostatní ( viz obrázek v odkazu ) http://omnique.cz/form.png |
||
| Joker Profil |
#2 · Zasláno: 16. 5. 2010, 11:19:14
Wreis:
„mám dotaz. Potřebuji, aby vybraná možnost měla jiný styl, než ostatní ( viz obrázek v odkazu )“ Tak teď to víme. A kde je ten dotaz? :-) Jestli je dotaz Jak to udělat?, záleží jak vypadá kód stránky, ale obecně bych řekl Javascriptem na událost onclick přehazovat CSS třídy. |
||
| Wreis Profil |
Ano, dotaz je jak to udělat :-)
tady přikládám html a css, s javascriptem si nevím rady <label> <input type="radio" /> <span class="inactive">text</span></label> .active{ background-color: #6F0; text-align:left; padding-left:15px;}
.inactive{ background-color:#CCC; text-align:left; padding-left:15px;}Moderátor Davex: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na
 ). |
||
| Joker Profil |
#4 · Zasláno: 16. 5. 2010, 14:00:18
Wreis:
První věc, proč je <input> uvnitř popisku, který se k němu(?) vztahuje? Když uděláte <input> <label>text</label>, nebude ani potřeba ten <span>. Já bych to asi udělal tak, že bych související prvky dal do jedné značky (významově se nabízí <fieldset>). Ta by měla ID a nějakou CSS třídu (třeba "radiogroup"). Dál by stačila jen CSS třída pro aktivní položku, neaktivní by mohla být obecná .radiogroup label. No a přepínátka by na onclick volala JS funkci, které by předala ID fieldsetu a ID prvku. Funkce by si přes getElementById našla fieldset, v něm prošla všechny label (getElementById), tomu správnému (buď přes ID, nebo kde atribut "for" odpovídá označenému prvku) nastavil CSS třídu pro aktivní a všem ostatním ji smazal. |
||
| Wreis Profil |
#5 · Zasláno: 16. 5. 2010, 16:01:58
Tak už jsem vyřešil tu změnu stylu, ale na povrch vyplavala moje další neznalost. Ať labelu nastavím cokoliv, jeho velikost nikdy není větší než text, který obsahuje. To je problém, label by totiž měl vypadat jako v obrázku zde http://omnique.cz/form.png. Můj další dotaz tedy zní: Jak to udělat?
<input type="radio" name="radioSet" id="option1" value="moznost1" checked="checked" /><label for="option1">moznost1</label>
label {
color:#999;
cursor:pointer;
padding-left:2px;
line-height:16px;
}
label.chosen {
color:#333;
background-color:#0C3;
}
.radioArea, .radioAreaChecked {
display:block;
float:left;
clear:left;
width:15px;
height:14px;
font-size:0;
cursor:pointer;
}
.radioArea {background:url(images/radio.gif) no-repeat left top;}
.radioAreaChecked {background:url(images/radio.gif) no-repeat left bottom;} |
||
| panther Profil |
#6 · Zasláno: 16. 5. 2010, 16:40:00
Wreis:
„Ať labelu nastavím cokoliv, jeho velikost nikdy není větší než text“ nevím, co mu nastavuješ, šířku tam nikde nevidím. Jelikož se jedná o řádkový element, kterému nejdou nastavit rozměry, udělej z něj blokový přidání floatu. |
||
| Wreis Profil |
#7 · Zasláno: 16. 5. 2010, 16:56:53
díky moc, vyřešeno
|
||
| Wreis Profil |
#8 · Zasláno: 17. 5. 2010, 13:39:59
Tak form jsem takřka dokonči. Na první pohled vše funguje jak má, ale objevil se zásadní problém. Při více radio skupinách v jednom formu se styly přehazují španě. To je nejspíš způsobeno javascriptem, kterému však příliš nerozumím. Prosím tedy o pomoc ještě s tímto problémem. form se nachází zde
|
||
|
Časová prodleva: 14 let
|
|||
0