2016-03-29 12 views
2

Ich habe diese JSFiddle und wenn Sie versuchen, den Text nur einen Teil davon in der richtigen Farbe auszuwählen, ist der Rest benutzerdefinierte blau.:: Auswahl überspringt einige Zeilen

::selection {background-color: #FF6347; color: #fff;} 
::-moz-selection{background-color: #FF6347; color: #fff;} 

Jeder Weg, um es zu beheben?

Getestet auf Safari 9.1.


Chrome:

Chrome

Safari:

Safari

+0

Ich bin ein bisschen verwirrt Möchten Sie diese Auswahl auf bestimmte Element? –

+0

oder Ihr Code überspringt einige Elemente? –

+0

Sieht so aus, als wäre dies ein Safari-spezifischer Fehler. Ich habe das Safari-Tag hinzugefügt. –

Antwort

0

Die Sache ist, das :: Auswahlelement hat einige Probleme mit Unterstützung Chrome und Safari .

https://developer.mozilla.org/en-US/docs/Web/CSS/%3a%3aselection

Um es ein wenig bessere Sicht in Chrom/Safari Sie Ihren Code zwischen einer Spanne oder einem Absatz wickeln, wie so zu machen ..

https://jsfiddle.net/akrm7uaL/8/

Wie Sie sehen, Der Text wird in ein div oder span umbrochen, so dass der gesamte Text rot ist, wenn er ausgewählt wird. Leider unterstützt der Browser die Leerzeichen zwischen den Texten nicht, wenn Sie ein neues div in Ihren Code einfügen. Um dies zu lösen müssen Sie legen Sie alle Ihren Text in einer Spanne statt eines div und legen Sie es zwischen einem div wie dieses ..

<div><span class="circular"></span></div> <!-- instead of --> <div><div class="circular"></div></div> 

https://jsfiddle.net/akrm7uaL/11/

Wie ich auf den Code schauen, ich nehme an, Sie verwenden die ID ist für Javascript oder PHP oder etwas, so wird es nicht vollständig Ihr Fall, wenn Sie die IDs zu Ihrem Code hinzufügen müssen ..

+0

@Vucko Nichts, mein Schlechter. Ich habe die Antwort in meiner Antwort gelöscht. – Gijsberts

Verwandte Themen