it-swarm.com.de

Ändern der Markierungsfarbe beim Auswählen von Text in einer HTML-Texteingabe

Ich habe im Internet danach gesucht und kann nicht einmal jemanden finden, der auch nur danach fragt, geschweige denn eine Lösung ...

Gibt es eine Möglichkeit, die Farbe des hervorgehobenen Bereichs innerhalb einer Texteingabe zu ändern, wenn Text ausgewählt wird? Nicht der Markierungsrahmen oder der Hintergrund, sondern der Teil, der um den Text erscheint, wenn Sie den Text tatsächlich ausgewählt haben.

52
Eric

Vielen Dank für die Links, aber es scheint so, als ob die eigentliche Textmarkierung nicht sichtbar ist.

Was das eigentliche Thema angeht, entschied ich mich für einen anderen Ansatz, da ich keine Texteingabe mehr benötige und innerHTML mit etwas JavaScript verwende. Die Textmarkierung wird nicht nur umgangen, sondern wirkt auch viel sauberer.

Dieses Granular eines Tweak zu einem HTML-Formularsteuerelement ist nur ein weiteres gutes Argument, um Formularsteuerelemente vollständig zu entfernen. Haha!

0
Eric
43
Sarfraz

das ist der Code.

/*** Works on common browsers ***/
::selection {
    background-color: #352e7e;
    color: #fff;
}

/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: #352e7e;
    color: #fff;
}

/***For Other Browsers ***/
::-o-selection {
    background-color: #352e7e;
    color: #fff;
}

::-ms-selection {
    background-color: #352e7e;
    color: #fff;
}

/*** For Webkit ***/
::-webkit-selection {
    background-color: #352e7e;
    color: #fff;
}
28
Conspiria

Ich weiß, dass dies eine alte Frage ist, aber für jeden, der auf sie stößt, kann dies mit contenteditable durchgeführt werden, wie in in diesem JSFiddle gezeigt.

Ein Kudos an Alex, der dies in den Kommentaren erwähnt hat (das habe ich bis jetzt nicht gesehen!)

20
jaypeagi

Alle Antworten hier sind korrekt, wenn es um das ::selection-Pseudoelement geht und wie es funktioniert. Die Frage fragt jedoch tatsächlich, wie sie bei Texteingaben verwendet werden soll.

Die einzige Möglichkeit, dies zu tun, besteht darin, die Regel über ein übergeordnetes Element der Eingabe (ein beliebiges übergeordnetes Element für diese Angelegenheit) anzuwenden:

.parent ::-webkit-selection, [contenteditable]::-webkit-selection {
	background: #ffb7b7;
}

.parent ::-moz-selection, [contenteditable]::-moz-selection {
	background: #ffb7b7;
}

.parent ::selection, [contenteditable]::selection {
	background: #ffb7b7;
}

/* Aesthetics */
input, [contenteditable] {
  border:1px solid black;
  display:inline-block;
  width: 150px;
  height: 20px;
  line-height: 20px;
  padding: 3px;
}
<span class="parent"><input type="text" value="Input" /></span>
<span contenteditable>Content Editable</span>

8
pilau

Hier ist das Problem:

     ::Auswahl {
 Hintergrund: # ffb7b7;/* WebKit/Blink-Browser /
 } 
 :: - moz-selection {
 Hintergrund: # ffb7b7;/ Gecko-Browser */
 }
Innerhalb der Auswahlauswahl sind Farbe und Hintergrund die einzigen Eigenschaften, die funktionieren. Für etwas mehr Flair können Sie die Auswahlfarbe für verschiedene Absätze oder verschiedene Abschnitte der Seite ändern.

Alles, was ich getan habe, war die Verwendung einer anderen Auswahlfarbe für Absätze mit unterschiedlichen Klassen:

     p.rot:: auswahl {
 Hintergrund: # ffb7b7; 
 } 
 p.rot::moz-auswahl {
 Hintergrund: # ffb7b7; 
 } 
 p.blau ::Auswahl {
 Hintergrund: # a8d1ff; 
 } 
 p.blau ::moz-auswahl {
 Hintergrund: # a8d1ff; 
 } 
 p.yellow :: selection {
 Hintergrund: # fff2a8; 
 } 
 p.yellow :: - moz-selection {
 Hintergrund: # fff2a8; 
 }
Beachten Sie, dass die Selektoren nicht kombiniert werden, auch wenn> der Stilblock dasselbe tut. Es funktioniert nicht, wenn Sie sie kombinieren:

<pre>/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
  background: #fff2a8;
}</pre>

Das liegt daran, dass Browser die gesamte Auswahl ignorieren, wenn ein Teil davon nicht verstanden wird oder ungültig ist. Es gibt einige Ausnahmen (IE 7?), Jedoch nicht in Bezug auf diese Selektoren.

DEMO

LINK WO INFO IS VON

2
user8529958

@ Mike Eng,

Bei der Auswahl der Hintergrundfarbe des Texts kann die Textfarbe mit Hilfe von :: selection geändert werden. Beachten Sie, dass :: selection in Chrome arbeitet, damit dies in Firefox-basierten Browsern funktioniert Versuchen Sie es mit :: - moz-selection

Versuchen Sie das folgende Codefragment in reset.css oder auf der css-Seite, an der Sie den Effekt genau anwenden möchten.

::selection{
   //Works only for the chrome browsers
   background-color: #CFCFCF; //This turns the background color to Gray
   color: #000; // This turns the selected font color to Black
}

::-moz-selection{
   //Works for the firefox based browsers
   background-color: #CFCFCF; //This turns the background color to Gray
   color: #000; // This turns the selected font color to Black
}

Der obige Code funktioniert auch in den Eingabefeldern. 

0

Es scheint, als würde man beim Definieren des Rahmens innerhalb einer Stildeklaration für Fokus-Pseudoelemente diesen anstelle des normalen blauen Rahmens verwenden. Damit können Sie einen Stil definieren, der genau mit dem Elementrand übereinstimmt. 

input:focus, textarea:focus {
    border:1px solid gray;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>

Hier ist ein modifizierter Randstil: 

input:focus, textarea:focus {
    border:2px dotted red;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>

0
1.21 gigawatts