✔ Border passt sch im Chrome nicht an

S

Sententiaregum

Mitglied
Hallo Community,
ich arbeite gerade an einem Suchscript. Dafür brauche ich eine schöne Suchleiste für den Header.
Dieser habe ich abgerundete Ecken gegeben:
Code: 
#search {
border-radius: 24px;
}
Das ist zwar schön und gut, aber im Chrome kommt ein orange Farbener Rahmen, welcher sich NICHT an die abgerundeten Ecken anpasst. D. h., dass die Ecken zwar abgerundet sind, aber der Rahmen sich nicht anpasst.

Ich habe auch scon einiges ausprobiert:
Code: 
#search:focus { border: none }
/* Oder: */
#search:focus {border-radius: 24px }

Könnt ihr mir weiterhelfen ?
LG Sententiaregum
 
Ich würde folgendes nutzen:
CSS: 
textarea:focus, input:focus{
    outline: none;
}


/* Wenn du auch das Hervorheben anderer Elemente unterdrücken möchtest: */
*:focus {
    outline: none;
}

Siehe auch: StackOverflow: How to remove border (outline) around text/input boxes? (Chrome)

Edit: Wie hela auch im nächsten Beitrag erwähnt, hat der Standard-Outlinerahmen auch einen Sinn für Tab-Navigationsbenutzer o.ä. und deshalb sollte man normalerweise lieber eine andere Farbe vergeben, als ihn ganz wegzulassen.
 
Hallo,

ich würde den Rahmen um ein fokussiertes Element nicht generell beseitigen, normalerweise stört das nur die Mausbenutzer. Wer sich aber mit der Tabulatortaste durch die Seitenstruktur arbeiten will, der braucht diesen Rahmen um das derzeit fokussierte Element zu erkennen.
Besser wäre es m.E. den Elementen, bei denen der Rahmen beim Mausklick stört, mit Javascript bzw. jQuery ein Maus-Event zu verpassen und damit das entsprechende fokussierte Element mit der blur()-Methode zu defokussieren.

Siehe auch:
 
... und ich wollte nur meine Meinung zu ComFreeks Vorschlag los werden.
Ich war der Meinung, dass das Problem gelöst ist. Wenn das der Fall ist, dann markiere das bitte indem du neben dem "Antworten"-Button auf das Häckchen klickst
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück