[CSS] Puntjes rondom button verwijderen

[DimitryK]

Ik ben nu al minstens een uur bezig om een oplossing te vinden voor onderstaand geval:


Zoals jullie zien, ik heb een button. Standaard, zoals ook hier het geval is, zet de webbrowser er een mooi zwart lijntje omheen, waarmee wordt aangegeven dat men al een keer op deze knop/link heeft geklikt.
Nou wil ik dit lijntje dus niet om mijn button hebben. Mijn vraag is dan ook, hoe ik van dit lijntje af kom.

Op enkele pagina's heb ik al gelezen dat dit via CSS mogelijk is, maar nergens staat een voorbeeld...

Zou iemand mij kunnen helpen?

Bij voorbaat dank

[macciez]

Wellicht zou je eens kunnen beginnen met wat code te posten

[Zeebonk]

Volgens mij moet je met "outline" spelen om die "focus" weg te krijgen.

Kanttekening: het weghalen van de focus zorgt er wel voor wanneer mensen door je pagina heen tabben ze niet meer kunnen zien of ze al bij je knop zijn aanbeland.

[ Voor 53% gewijzigd door Zeebonk op 28-10-2009 17:09 ]

[DimitryK]

code:

.BUTTON { width: 97px;
        height: 27px;
        background: transparent url(images/button.png) no-repeat 0 0 scroll;
        border: none;
        padding-bottom: 5px;
        font-family:Arial, Helvetica, sans-serif;
        font-size: 9pt;
        color: #e4dbbe;
        cursor: pointer;
                outline: none;
    }
    
.BUTTON:hover { background: transparent url(images/button_mouseover.png) no-repeat 0 0 scroll;
    }
    
.BUTTON:active { background: transparent url(images/button_active.png) no-repeat 0 0 scroll;
        border: none;
    }

[Duroth]

CSS Outline property

Edit: Let wel op dat dit redelijk funest is voor je usability, zeker voor mensen die niet muizen maar liever door hun forms heen tabben. Je zult dus wel op een andere manier moeten aangeven dat de button in kwestie 'actief' is op het moment.

[ Voor 62% gewijzigd door Duroth op 28-10-2009 17:09 ]

[DimitryK]

Duroth schreef op woensdag 28 oktober 2009 @ 17:08:
CSS Outline property

Edit: Let wel op dat dit redelijk funest is voor je usability, zeker voor mensen die niet muizen maar liever door hun forms heen tabben. Je zult dus wel op een andere manier moeten aangeven dat de button in kwestie 'actief' is op het moment.

Snap ik, maar het is voor privé-gebruik.

De outline property heb ik ook al geprobeerd, ook bij het :active gedeelte. Maar de puntjes blijven bestaan

[Zeebonk]

Duroth schreef op woensdag 28 oktober 2009 @ 17:08:
CSS Outline property

Edit: Let wel op dat dit redelijk funest is voor je usability, zeker voor mensen die niet muizen maar liever door hun forms heen tabben. Je zult dus wel op een andere manier moeten aangeven dat de button in kwestie 'actief' is op het moment.

Het is dat je op het zelfde moment hebt geedit anders had ik je van plagiaat beticht.

[Verwijderd]

DimitryK schreef op woensdag 28 oktober 2009 @ 17:12:
[...]


Snap ik, maar het is voor privé-gebruik.

De outline property heb ik ook al geprobeerd, ook bij het :active gedeelte. Maar de puntjes blijven bestaan

Is het niet 0 ipv none?

[DimitryK]

Verwijderd schreef op woensdag 28 oktober 2009 @ 17:14:
[...]


Is het niet 0 ipv none?

Nope.
Er staat zelfs een keuze "hidden" tussen, en ook dat werkt niet

[Duroth]

Zeebonk schreef op woensdag 28 oktober 2009 @ 17:12:
[...]


Het is dat je op het zelfde moment hebt geedit anders had ik je van plagiaat beticht.

Bij deze dan...

Bron: W3Schools

Overigens lijkt de outline property pas in IE8 ondersteund te zijn; oudere IE-versies moeten het zonder doen.
(En in IE8 alleen met een correcte doctype..)

[Zeebonk]

DimitryK schreef op woensdag 28 oktober 2009 @ 17:16:
[...]


Nope.
Er staat zelfs een keuze "hidden" tussen, en ook dat werkt niet

Probeer eens:

Cascading Stylesheet:

.BUTTON:focus 
{
outline: 0;
}

[DimitryK]

Zeebonk schreef op woensdag 28 oktober 2009 @ 17:19:
[...]


Probeer eens:

Cascading Stylesheet:

.BUTTON:focus 
{
outline: 0;
}

Nog steeds hetzelfde...

[Zeebonk]

DimitryK schreef op woensdag 28 oktober 2009 @ 17:22:
[...]


Nog steeds hetzelfde...

Zoals Duroth net zei: zit je in internet explorer te testen? Als ik zo kijk op google lijkt het inderdaad te zijn dat IE outline niet ondersteund. Wat dus betekend dat je het in internet explorer niet uit kan zetten.

[DimitryK]

Zeebonk schreef op woensdag 28 oktober 2009 @ 17:26:
[...]


Zoals Duroth net zei: zit je in internet explorer te testen? Als ik zo kijk op google lijkt het inderdaad te zijn dat IE outline niet ondersteund. Wat dus betekend dat je het in internet explorer niet uit kan zetten.

Ik werk met Firefox 3.5.4

[Rwin]

er is een (oud en brak?) javascript die het weghaald, ik heb hem zo niet meer, een jaar of 5 geleden gebruikte we dat wel eens...

vv ja die ja! indeed

[ Voor 9% gewijzigd door Rwin op 28-10-2009 23:08 ]

[RobIII]

Rwin schreef op woensdag 28 oktober 2009 @ 22:53:
er is een (oud en brak?) javascript die het weghaald, ik heb hem zo niet meer, een jaar of 5 geleden gebruikte we dat wel eens...

JavaScript:

function ExplorerFix() {
    for (a in document.links) document.links[a].onfocus = document.links[a].blur;
}
if(document.all) document.onmousedown = ExplorerFix;

DimitryK schreef op woensdag 28 oktober 2009 @ 17:12:
[...]


Snap ik, maar het is voor privé-gebruik.

Als 't voor jezelf (alleen) is: waarom er zoveel werk van maken? Boeie dat er een focus rectangle om heen staat. Je bent de enige die 't ziet. En anders is 't toch niet zo "privé" als je ons wil doen geloven en dan moet je dus gewoon useability in acht nemen en met je takken van default behaviour afblijven tenzij je bij-zon-der goed weet waar je mee bezig bent. En dan wil je zo'n focus rectangle dus juist wél

[ Voor 40% gewijzigd door RobIII op 28-10-2009 22:59 ]

[Sebazzz]

Wat dan misschien beter is, als je die focus rectangle toch wat mooier wilt hebben, om deze zo te positioneren (of eigenlijk het element dat het omsluit) dat de rectangle precies om de randen van je button vallen, ik kan mij voorstellen dat dat wel mogelijk is.

[Verwijderd]

RobIII schreef op woensdag 28 oktober 2009 @ 22:57:

JavaScript:

function ExplorerFix() {
    for (a in document.links) document.links[a].onfocus = document.links[a].blur;
}
if(document.all) document.onmousedown = ExplorerFix;

Wow, nostalgie.

[DimitryK]

RobIII schreef op woensdag 28 oktober 2009 @ 22:57:
Als 't voor jezelf (alleen) is: waarom er zoveel werk van maken? Boeie dat er een focus rectangle om heen staat. Je bent de enige die 't ziet. En anders is 't toch niet zo "privé" als je ons wil doen geloven[...]

Het is in eerste instantie een privé-project. Het kan daarna public worden, maar dan kunnen er alsnog veranderingen worden aangebracht, zoals de focus rectangle.

[InZane]

Verwijderd schreef op donderdag 29 oktober 2009 @ 08:40:
[...]

Wow, nostalgie.

Lekker veelzeggende functiebenaming ook.. ExplorerFix

[R4gnax]

RobIII schreef op woensdag 28 oktober 2009 @ 22:57:
[...]

JavaScript:

function ExplorerFix() {
    for (a in document.links) document.links[a].onfocus = document.links[a].blur;
}
if(document.all) document.onmousedown = ExplorerFix;

[...]

Als 't voor jezelf (alleen) is: waarom er zoveel werk van maken? Boeie dat er een focus rectangle om heen staat. Je bent de enige die 't ziet. En anders is 't toch niet zo "privé" als je ons wil doen geloven en dan moet je dus gewoon useability in acht nemen en met je takken van default behaviour afblijven tenzij je bij-zon-der goed weet waar je mee bezig bent. En dan wil je zo'n focus rectangle dus juist wél

Of je bent natuurlijk bezig een alternatief gestylde focus rectangle te maken, voor een mooi opgemaakte button die in de look & feel van een web applicatie moet passen? Heb ik zelf ook eens gedaan. Voor IE < 8 heb je dan het Trident-specifieke hideFocus html-attribuut.

Het zal accesibility assistents en andere van dat soort tools trouwens een worst wezen of er een outline om een button staat of niet, want dat is alleen van belang voor visuele user agents. Maw: het zou geen invloed op het gedrag van dat soort applicaties mogen hebben.

[Leftblank]

R4gnax schreef op donderdag 29 oktober 2009 @ 17:12:
Het zal accesibility assistents en andere van dat soort tools trouwens een worst wezen of er een outline om een button staat of niet, want dat is alleen van belang voor visuele user agents. Maw: het zou geen invloed op het gedrag van dat soort applicaties mogen hebben.

Daarom staat er ook usability en niet accessability Voor screenreaders e.d. zal 't idd niks uitmaken, maar voor een ITer die achterover al tabbend door een webpagina gaat zou 't, zoals hierboven aangegeven, wel fijn zijn om te zien waar je ondertussen gebleven bent op de pagina.

[R4gnax]

Leftblank schreef op zondag 01 november 2009 @ 01:16:
Daarom staat er ook usability en niet accessability Voor screenreaders e.d. zal 't idd niks uitmaken, maar voor een ITer die achterover al tabbend door een webpagina gaat zou 't, zoals hierboven aangegeven, wel fijn zijn om te zien waar je ondertussen gebleven bent op de pagina.

En dat zie je niet als je zelf een alternatieve 'focus' style maakt die een beetje beter binnen de look & feel van je webpagina / webapplicatie past?

[_Thanatos_]

Cascading Stylesheet:

button::-moz-focus-inner { border: 0; }

En je bent in Firefox de puntjes kwijt voor <button> elementen. Maar zoals hierboven aangegeven: zonder iets extra's te doen zie je niet waar je focus ligt tijdens het tabben.

Dus:

Cascading Stylesheet:

button:focus { /* verzin wat moois+herkenbaars */ }

Er altijd bij maken.

[ Voor 46% gewijzigd door _Thanatos_ op 03-11-2009 23:02 ]