Keine schwarze border um den submit-button

[Kalle]

Hallo,

wie kann ich verhindern das beim anklicken eines input-Feldes
  der submit-botton eine schwarze Kante bekommt?

lg, Kalle

[topas]

Hallo Kalle

wie kann ich verhindern das beim anklicken eines input-Feldes
  der submit-botton eine schwarze Kante bekommt?

keine besonders gute Idee, dieses Verhalten zu verändern.

Helfen könnte:

<input type="submit" onfocus="if (this.blur) this.blur();" ...>

Viele Grüße

tp

[Ashura]

Hallo Kalle.

wie kann ich verhindern das beim anklicken eines input-Feldes
  der submit-botton eine schwarze Kante bekommt?

<normal>

Was für eine „schwarze Kante“?

</normal>

<extended mode="glaskugel">

Dies ist eine browserabhängige Eigenheit und symbolisiert, dass mittels Druck auf die [Enter]-Taste das zum Eingabefeld gehörige Formular abgeschickt werden kann.
AFAIK ist ein Unterbinden nicht möglich.

</extended>

Einen schönen Donnerstag noch.

Gruß, Ashura

[Ashura]

Hallo.

<extended mode="glaskugel">

Dies ist eine browserabhängige Eigenheit und symbolisiert, dass mittels Druck auf die [Enter]-Taste das zum Eingabefeld gehörige Formular abgeschickt werden kann.
AFAIK ist ein Unterbinden nicht möglich.

</extended>

Die Erklärung dieser Eigenheit ist hinfällig, da die Hervorhebung auch bei textarea-Elementen erscheint, wo sich ein Abschicken des Formulares per [Enter]-Taste wohl kaum möglich ist.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Der Martin]

Hallo Ashura,

Die Erklärung dieser Eigenheit ist hinfällig, ...

Nein, ist sie nicht. Die Erklärung ist -soweit es Windows betrifft- sogar fast korrekt. Du hättest bloß nicht so genau darauf eingehen sollen, nur dadurch hast du dir selbst widersprochen. ;-)

Innerhalb eines Dialogfensters (und ein Web-Formular wird hier genauso behandelt) gibt es üblicherweise einen und nur einen Button mit der Windows-Eigenschaft BS_DEFAULT. Wenn das momentan fokussierte Element nicht selbst auf das Drücken der Enter-Taste reagiert, wird dieses Ereignis an den Default-Button weitergereicht. In einem Web-Formular ist das der Submit-Button, so dass man normalerweise mit der Enter-Taste das Formular absenden kann.

Die Hervorhebung des Submit-Buttons zeigt nur an, welcher von mehreren Buttons als Default eingestellt ist. Das ist aber unabhängig davon, ob er _im momentan aktuellen Programmkontext_ tatsächlich auf die Enter-Taste reagiert.
Wenn das Elternfenster (Browser) den Focus verliert, verschwindet die Hervorhebung übrigens auch.

So, hoffentlich habe ich jetzt nicht noch mehr Verwirrung gestiftet...
Ciao,

Martin

[Ashura]

Hallo Martin.

Die Erklärung dieser Eigenheit ist hinfällig, ...

Nein, ist sie nicht. Die Erklärung ist -soweit es Windows betrifft- sogar fast korrekt. Du hättest bloß nicht so genau darauf eingehen sollen, nur dadurch hast du dir selbst widersprochen. ;-)

OK.

[...]

So, hoffentlich habe ich jetzt nicht noch mehr Verwirrung gestiftet...

Nein; du hast meine lückenhafte Erklärung ergänzt, danke.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Twilo]

Hallo,

So, hoffentlich habe ich jetzt nicht noch mehr Verwirrung gestiftet...

und wie kann man dieses Verhalten deaktivieren?
denn das sieht nicht gerade schön aus ;)

mfg
Twilo

[Der Martin]

Hi,

und wie kann man dieses Verhalten deaktivieren?

Spontan würde ich sagen: Gar nicht.
Nach kurzem Nachdenken vermute ich mal, dass man den Effekt zumindest nicht mehr sieht, wenn man die Buttons per CSS mit einem eigenen Rahmen ausstattet, vielleicht sogar border:none.

denn das sieht nicht gerade schön aus ;)

Das ist Ansichtssache. Ich bin es so gewöhnt und finde das völlig in Ordnung. Ich versuche eher, Programmen, die eigene Skins mitbringen oder das Standardverhalten meines Systems verändern, eben dieses abzugewöhnen.

So long,

Martin

[Ashura]

Hallo Martin.

Nach kurzem Nachdenken vermute ich mal, dass man den Effekt zumindest nicht mehr sieht, wenn man die Buttons per CSS mit einem eigenen Rahmen ausstattet, vielleicht sogar border:none.

Bzgl. eigener Rahmen brauchst du dir nur einmal mein Gästebuch oder auch das Kontaktformular anzuschauen; du siehst, dass auch dort--trotz eigener Definitionen--diese Hervorhebung statt findet.
Bei border:none; tritt dieser Effekt aber nicht auf.
Doch bleibt hier natürlich dann nur noch die outline-Eigenschaft übrig, um diesen Elementen einen Rahmen zu verpassen.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Twilo]

Hallo,

Nach kurzem Nachdenken vermute ich mal, dass man den Effekt zumindest nicht mehr sieht, wenn man die Buttons per CSS mit einem eigenen Rahmen ausstattet, vielleicht sogar border:none.

Bzgl. eigener Rahmen brauchst du dir nur einmal mein Gästebuch oder auch das Kontaktformular anzuschauen; du siehst, dass auch dort--trotz eigener Definitionen--diese Hervorhebung statt findet.

bei mir auch, ich habe ein ganz feinen, sehr hellen grauen Border

Bei border:none; tritt dieser Effekt aber nicht auf.
Doch bleibt hier natürlich dann nur noch die outline-Eigenschaft übrig, um diesen Elementen einen Rahmen zu verpassen.

outline?
wie muss ich das anstellen?

mfg
Twilo

[Ashura]

Hallo Twilo.

outline?
wie muss ich das anstellen?

Die Anwendung der outline-Eigenschaft gleicht der der border-Eigenschaft fast gänzlich, es gibt lediglich ein paar kleine (aber feine) Unterschiede: CSS21: User interface.

Opera unterstützt die outline-Eigenschaft nativ. (Seit welcher Version weiß ich nicht.)

Die Geckos unterstützen mindestens -moz-outline, der Umgang ist identisch. (Ggf. unterstütz DeerPark auch schon outline, überprüfen kann ich es aber momentan nicht.)

Einen schönen Donnerstag noch.

Gruß, Ashura

[MudGuard]

Hi,

outline?
wie muss ich das anstellen?
Die Anwendung der outline-Eigenschaft gleicht der der border-Eigenschaft fast gänzlich, es gibt lediglich ein paar kleine (aber feine) Unterschiede: CSS21: User interface.

insbes.: kein Platzverbrauch für outline

Opera unterstützt die outline-Eigenschaft nativ. (Seit welcher Version weiß ich nicht.)
Die Geckos unterstützen mindestens -moz-outline,

ab Deer Park Alpha 1 auch ohne -moz-

der Umgang ist identisch. (Ggf. unterstütz DeerPark auch schon outline, überprüfen kann ich es aber momentan nicht.)

Ja, tut er.

cu,
Andreas

[MudGuard]

Hi,

Nachtrag: Konqueror (3.4.1) kann's auch.

cu,
Andreas

[Ashura]

Hallo MudGuard.

der Umgang ist identisch. (Ggf. unterstütz DeerPark auch schon outline, überprüfen kann ich es aber momentan nicht.)

Ja, tut er.

Danke für den Test. (DeerPark unterstützt die outline-Eigenschaft vollem Umfang nehme ich an.)

Einen schönen Donnerstag noch.

Gruß, Ashura

[MudGuard]

Hi,

Danke für den Test. (DeerPark unterstützt die outline-Eigenschaft vollem Umfang nehme ich an.)

Ich hab nichts gefunden, was nicht unterstützt würde (aber ob ich jetzt wirklich alle Werte-Kombinationen durch hab, kann ich nicht garantieren)

cu,
Andreas

[Ashura]

Hallo MudGuard.

Ich hab nichts gefunden, was nicht unterstützt würde (aber ob ich jetzt wirklich alle Werte-Kombinationen durch hab, kann ich nicht garantieren)

Wichtig sind im Grunde nur die korrekte Umsetzung des invert-Wertes, die Fähigkeit, outline nicht-rechteckig anzuzeigen und natürlich der nicht vorhandene Platzverbrauch.
Alles andere müsste wie bei der border-Eigenschaft umgesetzt werden.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Twilo]

Hallo,

und der IE?

ich könnte ja schlussfolgern, da ihr ihn nicht erwähnt, dass er es nicht kann ;)

mfg
Twilo

[MudGuard]

Hi,

ich könnte ja schlussfolgern, da ihr ihn nicht erwähnt, dass er es nicht kann ;)

Muß man das denn immer erwähnen, daß der sowas nicht kann?
Wär doch viel zu aufwendig. Es ist einfacher, die wenigen Dinge aus CSS 2, die er tatsächlich kann, zu erwähnen.

cu,
Andreas

[Twilo]

Hallo,

ich könnte ja schlussfolgern, da ihr ihn nicht erwähnt, dass er es nicht kann ;)

Muß man das denn immer erwähnen, daß der sowas nicht kann?
Wär doch viel zu aufwendig. Es ist einfacher, die wenigen Dinge aus CSS 2, die er tatsächlich kann, zu erwähnen.

dann bringt mir aber outline nichts

zur Zeit habe ich folgenden Code im CSS-File

#formular textarea:hover, #formular input:hover, #formular textarea:focus, #formular input:focus{  
  background-color: #f8fbfc;  
  border-left: 1px solid #333;  
  border-bottom: 1px solid #333;  
}  
#formular textarea:focus, #formular input:focus{  
  border-left-width: 2px;  
  border-bottom-width: 2px;  
}  
#formular #submit input {  
  padding: 2px 10px;  
  border: 1px solid #eee;  
  font-size: 1.2em;  
  font-weight: bold;  
  cursor: pointer;  
}  
#formular #submit input[type="submit"]{  
  padding: 5px 20px;  
}

mfg
Twilo