Toon posts:

[CSS] Zwarte lijn om input button

Pagina: 1
Acties:
  • 425 views sinds 30-01-2008
  • Reageer

Verwijderd

Topicstarter
Ik heb een form, met twee velden (een wachtwoord en emailinvoerveld) met een login knop. Deze knop heb ik gestyled met een achtergrond en een border. Opeens (volgens mij opeens) kwam er op het moment dat ik een van de twee invoervelden aanklikte om iets in te voeren, een zwarte border om mijn loginbutton. Ik heb dit proberen te voorkomen door button:focus en button:active (ik weet niet precies war ik de term active heb gelezen, maar ik dacht ik probeer het maar. Wellicht bestaat deze niet eens :/ )toe te voegen in de css, maar dit lost het alleen op in firefox. Weet iemand waar die border vandaan komt? En belangrijker: hoe krijg ik hem weer weg (ook in IE)?

Het gaat dus om de border die automatisch verschijnt om een knop als je een invoerveld aanklikt om wat in te vullen. Als je de 'focus' weer van het invoerveld afhaalt verdwijnt de border ook. Eerst had ik helemaal geen last van de border maar deze verscheen opeens 8)7 (ik heb niets veranderd zover ik weet)

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
#login form input.button, #login form input.button:focus, #login form input.button:active {
    background-color:#33ADDB;
    border: 1px solid #33ADDB;
    cursor:pointer;
    width: auto;
    font:0.9em "Trebuchet MS", Arial, Verdana;
    height: 22px;
    margin-right: 3px;
    padding-top: 1px;
}

Verwijderd

In een formulier <form> in IE krijgt in de submit button die uitgevoerd wordt, zodra er op enter gedrukt wordt, een randje (de hoofdsubmit button zou ik maar zeggen). Dit zie je bij bijna alle formulieren.

Hier zie je dat bijvoorbeeld ook:
http://hypotheek-kantoor.nl/bereken-maximale-hypotheek.html

Zodra het form de focus krijgt wordt er een lijn om de submit button getekend.

Hier op tweakers zie je het ook:
http://gathering.tweakers.net/forum/find

In IE krijgt de "Zoek!" knop een extra donkere rand

[ Voor 45% gewijzigd door Verwijderd op 14-02-2007 13:03 ]