Autor Zpráva
Wreis
Profil
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
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
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
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
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
díky moc, vyřešeno
Wreis
Profil
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

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: