ugrás a tartalomhoz

CSS kattintásra úgymaradó szöveg

hunkris · 2013. Már. 15. (P), 12.16
Sziasztok!

Az egyik barátom által kért weboldal készítése közben a dízájnhoz szükségem volt olyan szövegre, ami kattintásra megváltoztatja a tulajdonságait.

Szerettem volna javascript nélkül megoldani, végül eszembe ötlött egy rejtett checkbox + CSS megoldás.

Íme:

<form>
    <input id="gomb" type="checkbox" >
    <label id="szoveg" for="gomb">Szöveg</label> 
</form>

input[type=checkbox]:checked ~ #szoveg {
    color: red;
}
#gomb {
    display: none;
}
Gondoltam megosztom, és bár a régi böngészők nem támogatják a CSS3 részét, megy javascript nélkül is. Mit gondoltok róla?
‹ WYSIWYG editor - melyiket válasszam? Javascriptben írt placeholder probléma ›
 ■
1

Nem új ötlet, de jó.

Joó Ádám · 2013. Már. 15. (P), 19.27
Nem új ötlet, de jó.
2

CSS2

pkadam · 2013. Már. 16. (Szo), 02.32
Mi egy jelenlegi projektnél használunk ehhez hasonlót, de az CSS2 kompatibilis, mert nincs benne általános testvérszelektor (E ~ F), csak a közvetlen testvérszelektor (E + F). Így nem támaszkodunk sem JavaScriptre, sem új böngészőkre.

<label>
	<input type="checkbox" />
	<div>Megjelenítendő vagy megváltoztatandó tartalom.</div>
<label>
A böngészők alap checkbox és radio-gomb megjelenítéseit rajzoltuk újra, arculathoz illeszkedőre, így minden külön varázslat nélkül működik az űrlap is. A checkbox vagy a radio-gomb alapból display: none, és a div háttérszíne és/vagy háttérképének pozicionálása változik :checked állapotban (az újrarajzolt elemek pedig egy sprite-ban vannak). A CSS leegyszerűsítve:

label > input {
	display: none;
}
label > div {
	background: ... ; // háttérkép megfelelően pozicionálva
}
input:checked + div {
	background-position: ... ; // bejelölés megjelenítése a háttér átpozicionálásával
}
3

Általános körülmények között

Poetro · 2013. Már. 16. (Szo), 10.27
Általános körülmények között az E ~ F működik, pár bug-tól eltekintve.
In Internet Explorer 7, this selector fails if a comment appears between the combinator and the simple selector that follows it.

in Internet Explorer version 8 this selector only matches the first 298 elements in range
4

Én alapjában abból indultam

hunkris · 2013. Már. 16. (Szo), 11.50
Én alapjában abból indultam ki, hogy az, aki lusta, vagy nincs módjában frissíteni a böngészőt, nem fogja kikapcsolni a javascriptet sem. Így a régi böngészőkben azzal megy.

Az pedig könnyen megcsinálható, hogy akkor tegye be ezt stílusnak, ha nincsen js.