/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS styling af checkbox i mozilla
Fra : Ingrid [8000]


Dato : 30-09-04 11:57

Hej NG

Er det muligt at style en checkbox i Mozilla i en html formular sådan at den
får en andet baggrundsfarve når den har focus ?
Jeg har har søgt men ikke funder løsningen endnu.

Det lyder måske ikke så vigtigt, men det skal bruges til at hjælpe
svagtseende med at holde styr på hvor de er på siden.

Ingrid



 
 
Kim Ludvigsen (30-09-2004)
Kommentar
Fra : Kim Ludvigsen


Dato : 30-09-04 13:32

Ingrid [8000] wrote:

> Er det muligt at style en checkbox i Mozilla i en html formular sådan at den
> får en andet baggrundsfarve når den har focus ?

Det ved jeg ikke, men alternativt kan du placere checkbox'en i en div,
der skifter baggrundsfarve ved hoover.

--
Mvh. Kim Ludvigsen

Ingrid [8000] (30-09-2004)
Kommentar
Fra : Ingrid [8000]


Dato : 30-09-04 13:58

Tak for dit svar.

> > Er det muligt at style en checkbox i Mozilla i en html formular sådan at
den
> > får en andet baggrundsfarve når den har focus ?

Det kunne være en nødløsning for det betyder at jeg skal rette alle mine
formularer til. Jeg vil gerne gøre det via CSS i stedet for, hvis det
overhoved kan lade sig gøre.

/Ingrid



Dan Storm (30-09-2004)
Kommentar
Fra : Dan Storm


Dato : 30-09-04 14:52

Nej, der skal du bruge javascript...

<html>
<head>
<script type="text/javascript">
function toggle()
{
var obj = document.getElementById("tekstbox");
obj.style.backgroundColor = "#C0C0C0";
}
</script>
</head>

<body>

<form>
Din tekstbox: <input type="text" id="tekstbox" onfocus="toggle()" size="20">
</form>

</body>
</html>


--
Dan Storm

http://err0r.dk
storm@err0r.dk

PGP Public key på http://err0r.dk/pubring.pkr

>>> husk på; en ekspert er en person der har begået alle fejl mulige
inden for et bestemt område

Ingrid [8000] (30-09-2004)
Kommentar
Fra : Ingrid [8000]


Dato : 30-09-04 15:14

> <form>
> Din tekstbox: <input type="text" id="tekstbox" onfocus="toggle()"
size="20">
> </form>

En textbox kan man sagtens ændre baggrundsfarve på med CSS uden brug
javascript i Mozilla.

Det er kun checkboxen som jeg ikke kan få til at virke. Og javascript
betyder også at jeg skal rette alle mine forms.



Martin Hintzmann And~ (01-10-2004)
Kommentar
Fra : Martin Hintzmann And~


Dato : 01-10-04 07:41

Ingrid [8000] wrote:
>
> En textbox kan man sagtens ændre baggrundsfarve på med CSS uden brug
> javascript i Mozilla.
>
> Det er kun checkboxen som jeg ikke kan få til at virke. Og javascript
> betyder også at jeg skal rette alle mine forms.
>
>

Du bør ikke ændre på form elementer uanset grunden. Jeg kan godt se at
du vil gøre det i god mening. Men det er og bliver en no-do.

Og umiddelbart tror jeg at svagtseende vil vælge Opera før Mozilla, da
den skalere _alt_ på siden ved zoom.

Læs også denne artikel angående styling af form elementer, især hans
konklusion.
http://www.456bereastreet.com/archive/200409/styling_form_controls/

--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

Ingrid [8000] (01-10-2004)
Kommentar
Fra : Ingrid [8000]


Dato : 01-10-04 08:32

> Du bør ikke ændre på form elementer uanset grunden. Jeg kan godt se at
> du vil gøre det i god mening. Men det er og bliver en no-do.

Det er en bestemt gruppe svagtsagende vi udvikler til (intranet) og det er
nødvendigt at ændre form elementerne. Så det er vist en yes-do i vores
situation, det er ikke noget vi selv vælger men et krav fra brugerne. Så
der er ikke altid så sort-hvid.

>
> Og umiddelbart tror jeg at svagtseende vil vælge Opera før Mozilla, da
> den skalere _alt_ på siden ved zoom.

Ok, jeg tjekker lige Opera også, tak for tippet. Sagen er at de skal kunne
se tydeligt hvilket form element der har focus.

/Ingrid




Erik Ginnerskov (01-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 01-10-04 20:58

Ingrid [8000] wrote:

> Det er en bestemt gruppe svagtsagende vi udvikler til (intranet) og
> det er nødvendigt at ændre form elementerne. Så det er vist en yes-do
> i vores situation, det er ikke noget vi selv vælger men et krav fra
> brugerne. Så der er ikke altid så sort-hvid.

Det er da al ære værd at tage den slags hensyn. Men svagtseende har
alligevel installeret en form for hjælp så som ekstra stor tekst (her følger
forms-elementerne naturligt med op), så mon ikke det vil række med det?

>> http://www.456bereastreet.com/archive/200409/styling_form_controls/

.... viser jo med al tydelighed, at netop radio- og checkbuttons kan man
stort set ikke gøre noget ved - det er spild af krudt.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Ingrid [8000] (05-10-2004)
Kommentar
Fra : Ingrid [8000]


Dato : 05-10-04 10:24

> Det er da al ære værd at tage den slags hensyn. Men svagtseende har
> alligevel installeret en form for hjælp så som ekstra stor tekst (her
følger
> forms-elementerne naturligt med op), så mon ikke det vil række med det?

Nej det gør det ikke ! Jeg spørger jo ikke bare for sjovt her. Vi udvikler
en specialside til folk der ikke har ret meget syn tilbage. De bruger
Zoomtext men programmet viser ikke tydeligt nok hvor focussen er på en side.
Så det er et problem der skal løses.

Men der er vel ikke andet at gøre end at bruge javascript til det i stedet
for.

/Ingrid



Martin Hintzmann And~ (05-10-2004)
Kommentar
Fra : Martin Hintzmann And~


Dato : 05-10-04 11:10

Ingrid [8000] wrote:
>
>
> Nej det gør det ikke ! Jeg spørger jo ikke bare for sjovt her. Vi udvikler
> en specialside til folk der ikke har ret meget syn tilbage. De bruger
> Zoomtext men programmet viser ikke tydeligt nok hvor focussen er på en side.
> Så det er et problem der skal løses.
>
> Men der er vel ikke andet at gøre end at bruge javascript til det i stedet
> for.
>

I så fald bliver du nok nød til at bruge javascript.
Du kan ved eventen onfocus og onblur på chekc-/radio-box finde dens
label og give eller fjerne en class, som fremhæver labelen.

Prøv med følgende HTML-kode:
<div>
<input type="radio" name="radKoen" id="radKoen_mand" value="mand"/>
<label for="radKoen_mand">Mand</label>
</div>
<div>
<input type="radio" name="radKoen" id="radKoen_kvinde" value="kvinde"/>
<label for="radKoen_kvinde">Kvinde</label>
</div>

Du kan enten sætte eventsne inline i HTML-koden eller du kan loop formen
igennem og sætte dem dynamisk.

Her er et eksempel med inline:
<input ... onfocus="markLabel(this)" onblur="unmarkLabel(this)" />

Nedenståede funktion bruges til onfocus og onblur (Kan evt. samles til
en funktion)
function markLabel(what) {
var oField = what;
var oLabel = getLabelForId(oField.id);
if (oLabel) {
addClass(oLabel, "highlightLabel");
}
}
function unmarkLabel(what) {
var oField = what;
var oLabel = getLabelForId(oField.id);
if (oLabel) {
removeClass(oLabel, "highlightLabel");
}
}

Du skal bruge følgende funktion til at finde en label udfra et id.
function getLabelForId(id) {
var label, labels = document.getElementsByTagName('label');
for (var i = 0; (label = labels[i]); i++) {
if (label.htmlFor == id) {
return label;
}
}
return false;
}

Og følgende funktioner til at tilføje og fjerne en class fra et element.
function addClass (el, className) {
   if (el.className==null)
      el.className='';
   el.className+=(el.className.length>0?' ':'')+className;
}
function removeClass (el, className) {
var cs, j, remainClass;
remainClass = new Array();
cs = el.className.split(" ");
for (j = 0; j < cs.length; j++) {
if (cs[j] != className) {
remainClass.push(cs[j]);
    }
}
el.className = remainClass.join(" ");
}

I dit stylesheet skal du så blot style class'en "highlightLabel".

..highlightLabel {
   background:yellow;
   /* o.s.v. */
}

Håber at du kan bruge det. Jeg har dog ikke testet det, da det blot er
klippet klistret fra noget andet kode.

--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

Kim Ludvigsen (05-10-2004)
Kommentar
Fra : Kim Ludvigsen


Dato : 05-10-04 11:22

Martin Hintzmann Andersen wrote:
>
> Ingrid [8000] wrote:
>
> > Nej det gør det ikke ! Jeg spørger jo ikke bare for sjovt her. Vi udvikler
> > en specialside til folk der ikke har ret meget syn tilbage.
>
> I så fald bliver du nok nød til at bruge javascript.

Det burde være nok at putte checkboksene ind i en div og så bruge hover.
Der er tale om Mozilla, jfr. emnelinjen.

Ingrid, du kan finde programmer på nettet, der kan lave en søg/erstat i
mange filer på én gang. Så uanset hvor mange sider du har, så burde det
ikke tage dig mange minutter at placere en <div class="tjek"> og en
</div> på hver side af alle checkbokse og derefter definere .tjek i
css'en.

--
Mvh. Kim Ludvigsen
Har du fortalt din far og mor om Ludvigs Hjørne?
http://kimludvigsen.dk

Martin Hintzmann And~ (05-10-2004)
Kommentar
Fra : Martin Hintzmann And~


Dato : 05-10-04 11:32

Kim Ludvigsen wrote:
>
> Det burde være nok at putte checkboksene ind i en div og så bruge hover.
> Der er tale om Mozilla, jfr. emnelinjen.
>

Ja, ups... det glemte jeg. Ingrid du bør også sætte eventsne ved
mouseover og mouseout, og ikke kun ved onfocus/-blur.

Problemet ved at bruge et div element med hover er at det kun virker med
musen og ikke når brugeren får focus på et input element via tastaturet.


> Ingrid, du kan finde programmer på nettet, der kan lave en søg/erstat i
> mange filer på én gang. Så uanset hvor mange sider du har, så burde det
> ikke tage dig mange minutter at placere en <div class="tjek"> og en
> </div> på hver side af alle checkbokse og derefter definere .tjek i
> css'en.
>

Hvis eventsne "påklistres" dynamisk via javascript behøver Ingrid ikke
at lave om på sin HTML-kode. (Hvis labels bruges rigtigt)



--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

Kim Ludvigsen (05-10-2004)
Kommentar
Fra : Kim Ludvigsen


Dato : 05-10-04 12:40

Martin Hintzmann Andersen wrote:
>
> Problemet ved at bruge et div element med hover er at det kun virker med
> musen og ikke når brugeren får focus på et input element via tastaturet.

Den havde jeg ikke lige tænkt på. Og netop med tanke på målgruppen, er
det nok meget sandsynligt, at de bruger tastaturet.

--
Mvh. Kim Ludvigsen
Har du fortalt din far og mor om Ludvigs Hjørne?
http://kimludvigsen.dk

Martin Hintzmann And~ (05-10-2004)
Kommentar
Fra : Martin Hintzmann And~


Dato : 05-10-04 12:45

Martin Hintzmann Andersen wrote:
>
> Hvis eventsne "påklistres" dynamisk via javascript behøver Ingrid ikke
> at lave om på sin HTML-kode. (Hvis labels bruges rigtigt)
>

Jeg har lavet et eksempel som er testet og virker i MSIE6,
Firefox1.0rc1, Opera7.60. Har ikke testet øvrige browsere.

http://www.hintzmann.dk/testcenter/js/marklabels/index.html


--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

kim isaksen (05-10-2004)
Kommentar
Fra : kim isaksen


Dato : 05-10-04 17:04

Martin Hintzmann Andersen wrote:

> Kim Ludvigsen wrote:
>
>>
>> Det burde være nok at putte checkboksene ind i en div og så bruge hover.
>> Der er tale om Mozilla, jfr. emnelinjen.
>
>
> Ja, ups... det glemte jeg. Ingrid du bør også sætte eventsne ved
> mouseover og mouseout, og ikke kun ved onfocus/-blur.
>
> Problemet ved at bruge et div element med hover er at det kun virker med
> musen og ikke når brugeren får focus på et input element via tastaturet.
>
Hvad med at bruge :focus på de elementer der nu skal vises. Det virker
fint i mozilla.
<url:http://www.quirksmode.org/css/focus.html>

jeg har lige leget lidt med det her.
<url:http://www.imtech.dk/test_001.php>

Men som sagt. IE understøtter ikke :focus pseudo klassen. Om opera gør
ved jeg faktisk ikke ?

/iM

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste