it-swarm.com.de

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

Einen Input haben

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

und dies zu tun (mit jQuery)

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

bewirkt, dass "bla bla bla" mit der voreingestellten dunkelblauen Auswahlfarbe ausgewählt wird.

Gibt es eine Möglichkeit, diese Farbe mit CSS zu ändern? css3 kann beispielsweise die Auswahl ändern

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

dies funktioniert jedoch nur für Text in anderen Elementen, nicht in HTML-Eingaben.

Irgendwelche Ideen?

/ T

25
Tommy

Funktioniert für mich in Firefox (neueste Version), aber 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 das einzige, das funktioniert hat. Vielleicht ein Bug oder vielleicht erlaubt Ihnen Webkit nicht, diesen Teil der Benutzeroberfläche zu gestalten?


Nur ein Update hier, um ein wenig mehr ins Detail zu gehen. ::selection ist ein nicht standardmäßiges Pseudoelement, was bedeutet, dass Sie, obwohl die meisten Browser dies unterstützen keine Garantie dafür haben, dass sie dies weiterhin tun, oder dass neue Browser dies unterstützen. Verwenden Sie es also, aber machen Sie es für die Benutzerfreundlichkeit Ihrer Website nicht unbedingt erforderlich. Mehr zu diesem Thema finden Sie im MDN .

9
Timothy Miller

Ich glaube nicht, dass es eine Möglichkeit gibt, dies zu tun. Die Farbe des ausgewählten Texts wird auf Software-/Betriebssystemebene festgelegt und kann nicht wirklich mit Javascript gesteuert werden. Auf der Seite select api http://api.jquery.com/select/ werden mehrere Plugins aufgeführt, die Ihnen mitteilen, welchen Text der Benutzer ausgewählt hat. Das einzige, was ich mir vorstellen kann, ist, wenn der Benutzer einen Text auswählt, Sie den ausgewählten Text entfernen und denselben Text einfügen, der in einem Bereich markiert ist, der ihn in einer anderen Farbe hervorhebt. Sie sehen jedoch weiterhin das Blau, während sie hervorheben ...

6
Finbarr

Es funktioniert für mich, wenn Sie manuell auswählen, was Sie möchten.

<!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>

Getestet in Firefox 4.0b6

Es funktioniert nicht mit Ihrer jQuery-Funktion, da jQuery Ihr <input /> -Element auswählt, anstatt den tatsächlichen Text auszuwählen. Versuchen Sie etwas wie das obige Skript. Du solltest sehen, dass es funktioniert.

4
ssice

Ich bin mir ziemlich sicher, dass das nicht geht. Ich habe mir das vor einiger Zeit 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 Texts steuern und ändern. Dann hatte ich nur die Eingabe als verstecktes Feld, das entsprechend aktualisiert wurde.

Dies ist wahrscheinlich nicht die Antwort, nach der Sie gesucht haben, aber so konnte ich das Problem umgehen.

2
uadrive

Das funktioniert zumindest auf meinem FF 7.0.1:

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

Wie wäre es, das Aussehen im Stylesheet einzurichten und dann etwas zu verwenden wie:

< style >

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

< / style>

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

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

0
rydordy