textarea focus rahmen abschalten (Chrome)

[DaWonderer]

Hallo,

ich habe eine Tabellenzelle mit einem Hintergrundbild - ein spezieller Rahmen - für die darin liegende Textarea. Das Eingabefeld habe ich in der Größe fixiert mit 'resize:none:'. Habe es jetzt soweit, dass es im IE/FF/Chrome einigermaßen gleich aussieht. Das Problem ist die fokusierte Textarea im Chrome - hierbei wird zum Anzeigen welches Element im Fokus ist ein bläulicher Rahmen um das Eingabefeld gezeigt.

die folgenden Style-Sheet-Angaben brachten nicht das gewünschte Abschalten des Fokus-Rahmens:

textarea:focus { border:0px solid; border-color:#FFFFFF }

Kann man das nicht Abschalten und ist eine interne Chrome-Sache?

[Gunnar Bittersmann]

@@DaWonderer

Das Problem ist die fokusierte Textarea im Chrome - hierbei wird zum Anzeigen welches Element im Fokus ist ein bläulicher Rahmen um das Eingabefeld gezeigt.

Wie möchtest du denn das gegenwärtig fokussierte Element sonst kenntlich machen?

Sag jetzt bitte nicht „gar nicht“, sonst hast du das nächste Problem.

die folgenden Style-Sheet-Angaben brachten nicht das gewünschte Abschalten des Fokus-Rahmens:

textarea:focus { border:0px solid; border-color:#FFFFFF }

Ich würde denken, dass Chrome den Fokus nicht mit Rahmen, sondern mit Schatten kenntlich macht.

LLAP 🖖

[DaWonderer]

Wie möchtest du denn das gegenwärtig fokussierte Element sonst kenntlich machen?

Sag jetzt bitte nicht „gar nicht“, sonst hast du das nächste Problem.

Naja, in den Eingabefeldern erkennt man anhand des blinkenden Cursors wo man sich befindet. Im Prinzip hast du schon Recht dass das sinnvoll ist. Allerdings machen IE/FF Eingabefelder jetzt nicht extra anders in der Darstellung wenn sie fokusiert sind und nach dem Konzept das du ansprichst.

Ich habe Border auf 0px und BackGroundColor auf der Seiten-Hintergrundfarbe gesetzt damit nur das Hintergrundbild der Tabellenzelle als Rahmen für die Textarea sichtbar ist.

Ich würde denken, dass Chrome den Fokus nicht mit Rahmen, sondern mit Schatten kenntlich macht.

Danke, diese CSS-Eigenschaft kannte ich noch nicht. Habe für den Fokus jetzt alles auf 0px gesetzt doch Chrome scheint das wirklich intern zu machen - oder ich mache noch etwas falsch?

textarea:focus { box-shadow: 0px 0px 0px 0px #FEFAED; }

Danke für die Hilfe...

[Gunnar Bittersmann]

@@DaWonderer

Wie möchtest du denn das gegenwärtig fokussierte Element sonst kenntlich machen?

Sag jetzt bitte nicht „gar nicht“, sonst hast du das nächste Problem.

Naja, in den Eingabefeldern erkennt man anhand des blinkenden Cursors wo man sich befindet.

Ich denke nicht, dass das reicht. Da sucht sich ein Nutzer dumm und dämlich, ob irgendwo auf dem Bildschirm ein kleiner Strich blinkt.

Es hat schon seinen Grund, warum Browser das fokussierte Eingabefeld so stark hervorheben. Wenn’s dir per Rahmen nicht gefällt, dass mach etwas anderes: Hintergrundfarbe bspw. Aber irgenwas sollte es schon sein. Was auffälliges.

Ich würde denken, dass Chrome den Fokus nicht mit Rahmen, sondern mit Schatten kenntlich macht.

Danke, diese CSS-Eigenschaft kannte ich noch nicht. Habe für den Fokus jetzt alles auf 0px gesetzt doch Chrome scheint das wirklich intern zu machen - oder ich mache noch etwas falsch?

textarea:focus { box-shadow: 0px 0px 0px 0px #FEFAED; }

Hm, da hab ich wohl falsch gedacht. Dann ist es wohl outline.

LLAP 🖖

[DaWonderer]

Naja, in den Eingabefeldern erkennt man anhand des blinkenden Cursors wo man sich befindet.

Ich denke nicht, dass das reicht. Da sucht sich ein Nutzer dumm und dämlich, ob irgendwo auf dem Bildschirm ein kleiner Strich blinkt.

Vorausgesetzt er hat nicht auf ein Element geklickt, denn sonst erwartet er den Cursor und die Eingabe auch genau dort ;)

Es hat schon seinen Grund, warum Browser das fokussierte Eingabefeld so stark hervorheben. Wenn’s dir per Rahmen nicht gefällt, dass mach etwas anderes: HIntergrundfarbe bspw. Aber irgenwas sollte es schon sein. Was auffälliges.

Ich könnte tatsächlich ein zweites Hintergrundbild erstellen bei dem der spezielle Rahmen anders aussieht - die Linienstärke größer ist. Danke für den Hinweis zur Usability :)

Ich würde denken, dass Chrome den Fokus nicht mit Rahmen, sondern mit Schatten kenntlich macht.

Danke, diese CSS-Eigenschaft kannte ich noch nicht. Habe für den Fokus jetzt alles auf 0px gesetzt doch Chrome scheint das wirklich intern zu machen - oder ich mache noch etwas falsch?

textarea:focus { box-shadow: 0px 0px 0px 0px #FEFAED; }

Hm, da hab ich wohl falsch gedacht. Dann ist es wohl outline.

Danke, genau das war es auch...

[Gunnar Bittersmann]

@@DaWonderer

Ich könnte tatsächlich ein zweites Hintergrundbild erstellen

Das dann zusätzlich geladen werden muss‽

Stattdessen könntest du filter anwenden.

Oder eine teiltransparente farbige (weiße?) Fläche drüberlegen:

textarea
{
  background: url(foo);
}

textarea:focus
{
  background: linear-gradient(hsla(0, 100%, 100%, 0.6), hsla(0, 100%, 100%, 0.6)), url(foo);
}

LLAP 🖖

[MudGuard]

Hi,

Wie möchtest du denn das gegenwärtig fokussierte Element sonst kenntlich machen?

Sag jetzt bitte nicht „gar nicht“, sonst hast du das nächste Problem.

Naja, in den Eingabefeldern erkennt man anhand des blinkenden Cursors wo man sich befindet.

Das setzt voraus, daß die Stelle der Textarea, an der sich der Cursor befindet, nicht weggescrollt ist.

cu,
Andreas a/k/a MudGuard

[1unitedpower]

Ein Blick in die Konsole offenbart, dass die outline-Eigenschaft dafür verwendet wird.

input:focus, textarea:focus, keygen:focus, select:focus {
  outline-offset: -2px;
}
:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

Wobei -webkit-focus-ring-color bei mir rgb(77, 144, 254) entspricht.

[DaWonderer]

und wieder was gelernt :)

danke, genau diese Eigenschaft ist es - gesetzt auf SeitenHintergrundFarbe und der 'Fokus-Rahmen' im Chrome ist weg...