Styling der Auswahlfarbe eines Eingabetyps = Text, möglich?

einen EingangStyling der Auswahlfarbe eines Eingabetyps = Text, möglich?

<input type="text" id="myTest" value="bla bla bla"/>

und tun dies (mit jQuery)

$('#myTest').select();

Ursachen "bla bla bla" Nachdem mit Standarddunkelblau Auswahlfarbe ausgewählt werden.

Nun, gibt es eine Möglichkeit, diese Farbe mit CSS zu ändern? css3 kann die Auswahl zum Beispiel unter Verwendung ändern

::-moz-selection { 
    background: #ffb7b7; 
}

aber das funktioniert nur auf Text in anderen Elementen nicht in HTML-Eingängen.

Irgendwelche Ideen?

Quelle

2009-10-21 Tommy

Wenn Sie etwas finden, bitte diese offene Frage aktualisieren: http://stackoverflow.com/questions/2043695/textareaselection-and-moz-selection –

Wie wäre es den Blick in das Stylesheet einrichten und dann mit so etwas wie:

<style> 

.selected-look{color:somehex, border:; font-family:; background:;} // etc; 

</style> 

$('#myTest').toggleClass('selected-look').select();

oder $('#myTest').select().toggleClass('selected-look');

Quelle

2009-10-23 04:28:37 rydordy

Ich sehe nicht, wie dies die Auswahl beeinflussen Farbe einer Auswahl in einem Eingabefeld (Typ = Text)? – Tommy

Ich glaube nicht, dass es eine Möglichkeit, dies zu tun . Die Farbe des ausgewählten Textes wird auf der Software/OS-Ebene festgelegt und kann nicht wirklich mit Javascript gesteuert werden. Die select api-Seite http://api.jquery.com/select/ erwähnt mehrere Plugins, die Ihnen sagen, welchen Text der Benutzer ausgewählt hat. Das einzige, was ich mir vorstellen kann, ist, wenn der Benutzer einen Text auswählt, den ausgewählten Text entfernt und den gleichen Text einfügt, der in einem Bereich markiert ist, der ihn in einer anderen Farbe hervorhebt. sehen Sie werden jedoch nach wie vor die blaue, wie sie hervorheben ...

Quelle

2010-03-09 23:47:46 Finbarr

-1

Für meine Eingaben ich dies verwenden in meiner CSS-Dateien:

input[type="text"] { /* css properties */}

der „Text“ kann mit „Textfeld ersetzt werden "," submit "... funktioniert sogar mit Hover-Effekten, zB:

#area-restrita input[type='submit']:hover { background-color:#CCC; color:#FFF;}

Ich hoffe, es kann helfen.

Quelle

2010-03-16 21:55:20 kevin

Es funktioniert für mich, wenn Sie manuell auswählen, was Sie wollen.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Test</title> 
<style type="text/css"> 

p::-moz-selection, input::-moz-selection, textarea::-moz-selection { 
    color: red; 
    background-color: grey; 
} 
</style> 
<script type="text/javascript"> 
window.onload = function() { 
    var message = document.getElementById('itext'); 
    // Select a portion of text 
    createSelection(message,3, 10); 

    // get the selected portion of text 
    var selectedText = message.value.substring(message.selectionStart, message.selectionEnd); 
}; 

function createSelection(field, start, end) { 
    if(field.createTextRange) { 
     var selRange = field.createTextRange(); 
     selRange.collapse(true); 
     selRange.moveStart('character', start); 
     selRange.moveEnd('character', end); 
     selRange.select(); 
    } else if(field.setSelectionRange) { 
     field.setSelectionRange(start, end); 
    } else if(field.selectionStart) { 
     field.selectionStart = start; 
     field.selectionEnd = end; 
    } 
    field.focus(); 
}  
</script> 
</head> 

<body> 
<p>This paragraph is selection-aware.</p> 
<form action="#"> 
<input type="text" id="itext" value="So is this input[text]" /> 
<textarea id="itextarea">And this textarea, as well</textarea> 
</form> 
</body> 
</html>

in Firefox 4.0b6

Getestet

Es ist nicht mit jQuery-Funktion zu arbeiten, weil jQuery Ihr <input /> Element ist die Auswahl, anstatt den eigentlichen Text auszuwählen. Versuchen Sie etwas wie das obige Skript. Du solltest es funktionieren sehen.

Quelle

2010-11-02 12:34:27 ssice

-1

Für meine Eingaben i diese Dateien in meinem CSS verwenden:

input[type="text"] { /* cssproperties */ }

der "Text" kann mit "Textfeld", "Eintragen" ... selbst arbeitet mit Hover-Effekten ersetzt werden, zB:

#area-restrita input[type='submit']:hover {background-color:#CCC; color:#FFF;}

Ich hoffe, es kann helfen.

Quelle

2011-03-15 00:59:00 Jon

Ich bin mir ziemlich sicher, dass das nicht möglich ist.Ich habe mir das eine Weile angesehen und am Ende ein Div-Tag anstelle einer Eingabe verwendet und es wie ein Eingabefeld aussehen lassen. Dadurch konnte ich die hervorgehobene Farbe des ausgewählten Textes kontrollieren und ändern. Dann hatte ich gerade die Eingabe als verstecktes Feld, das entsprechend aktualisiert wurde.

Dies ist wahrscheinlich nicht die Antwort, die Sie gesucht haben, aber das war, wie ich das Problem umgehen konnte.

Quelle

2011-10-23 22:15:15 uadrive

Dies funktioniert zumindest auf meinem FF 7.0.1:

input::-moz-selection { 
    background-color: green; 
}

Quelle

2011-10-24 21:24:17 Lycha

Works für mich in Firefox (neueste Version), aber es funktioniert nicht in Webkit. Hier ist ein Test: http://jsfiddle.net/Gp8Rr/

Ich habe es in den neuesten Versionen von Chrome, Safari und Firefox getestet, und Firefox war der einzige, der funktionierte. Vielleicht ein Fehler, oder vielleicht Webkit erlaubt es Ihnen nicht, diesen Teil ihrer Benutzeroberfläche zu stylen?

Nur ein Update hier, in ein wenig mehr Details zu gehen. ::selection ist ein Nicht-Standard-Pseudo-Element, was bedeutet, dass Sie trotz most browsers support it keine Garantie haben, dass sie dies weiterhin tun werden, oder dass neue Browser es unterstützen werden. Also mach weiter und benutze es, aber mach es nicht wichtig für die Nutzbarkeit deiner Seite. Es gibt mehr zu diesem Thema bei der MDN.

Quelle

2011-10-31 19:14:04

Ab 2015 scheint dies [in vielen Browsern unterstützt] (http://caniuse.com/#feat=css-selection) einschließlich IE9 +, Chrome, Safari, Firefox. Für die Passanten würde ich sagen, dass dies die akzeptierte Antwort sein sollte. – aug

-1

Wollen Sie das? Der Text wird nach der Auswahl rot angezeigt.

$("input").select(function(){ $("input").css("color","red"); });

Quelle

2011-11-01 16:52:22 RickjS

Styling der Auswahlfarbe eines Eingabetyps = Text, möglich?

Antwort

Verwandte Themen