Rahmen um Formularelement verändern

[Bodo123123]

Hallo,
viele körperlich eingeschränkte Menschen navigieren auf einer Webseite mit der Tab-Taste. Dabei erscheint um das angepeilte Element immer ein farbiger Rahmen der deutlich macht, auf welchem Element sich der Nutzer befindet. Ich möchte gerne die Farbe dieses Rahmens ändern. Weiß jemand wie das Css-seitig geht?
VG Bodo

 

[Lawnmower]

Basis mal mit border-color
https://developer.mozilla.org/en-US/docs/Web/CSS/border-color?retiredLocale=de

Das aktive Element kann man mit :focus ansteuern, also z.B. input:focus.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus?retiredLocale=de

Meinst Du das?

 

[kim88]

Oft wird der Focus-Rahmen nicht mit Border sondern mit Outline oder Box-Shadow gezeichnet. über das Untersuchen Menü im Browser solltest du das schnell rausfinden können.

 

[Bodo123123]

Basis mal mit border-color
https://developer.mozilla.org/en-US/docs/Web/CSS/border-color?retiredLocale=de

Das aktive Element kann man mit :focus ansteuern, also z.B. input:focus.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus?retiredLocale=de

Meinst Du das?

Danke für deine Antwort, nein das hilft leider nicht weiter. Ich schicke anbei mal ein Video. Diesen blauen Rahmen meinte ich:

 

[kim88]

@Bodo123123 hast du einen Link dazu?

 

[Bodo123123]

Zu der Webseite? Nein, aber in dem Video was ich in der letzen Nachricht angehängt habe ist ja der blaue Rand zu erkennen, den ich meinte.

 

[kim88]

@Bodo123123 ja aber wie gesagt das kein ein "border-color" ein "outline" oder auch ein Box Shadow sein. Mit einem Link oder entsprechendem CSS Code könnte man kurz nachsehen. ^^

 

[Bodo123123]

Achso, bin leider ein blutiger Anfänger daher das Missverständnis.

#heading{
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(148, 185, 186);
}
.text{
    font-family:Arial, Helvetica, sans-serif;
    font-size: large;
    color: rgb(255, 187, 162);
}
body{
    background-color: rgb(0, 0, 0);
}

.rand{
    border-radius: 50px;
    border-color:rgb(255, 255, 255)
}

 

[kim88]

ist .rand die Klasse für deine Input Felder?

Dann müsste du mit:

.rand:hover {
    border-color: green;
}

Die Farbe ändern können.

 

[Bodo123123]

Ah, ja das hat geklappt, beim drüberfahren mit der Maus war alles gut, nur steuern viele körperlich eingeschränkte Menschen diese Felder mit der Tab-Taste an, und da funktioniert das leider nicht.

 

[kim88]

Ah ja, Hover deckt halt effektiv nur Hover ab. Also das drüber fahren mit der Maus:

Du kannst das anpassen:

.rand:hover,
.rand:active,
.rand:focus {
    border-color: green;
}

Zur Erklärung:

:active ist wenn ein Element "active" ist bedeutet wenn man es z.b. auf dem Touchscreen antippt.

:focus ist wenn es im Fokus ist, das müsste das mit dem Tab steuern

:hover ist wenn man mit der Maus über das Element fährt

 

[Bodo123123]

Ja, danke so kommt es durch. Vielen Dank auch für die Erklärung : )

 

[User007]

Hi und (erstmal) willkommen im Forum!

​

[...] viele körperlich eingeschränkte Menschen navigieren auf einer Webseite mit der Tab-Taste. [...]
[...] die Farbe dieses Rahmens ändern [...]

Vllt. auch zu "Rahmen" einfach mal ganz allgemein (in der Mutter aller öffentlichen Wikis) bei selfHTML die border-Eigenschaften lesen.
Ansonsten könnte sicherlich durchaus auch dieser Artikel "Benutzereingaben (in Formularen) zugänglich gestalten" im Abschnitt 2.2 "Focus und Tabs" (mit dem Universalattribut tabindex) interessant sein.​