Stylizacja koloru selekcji typu danych wejściowych = tekst, możliwe?

posiadający wejścieStylizacja koloru selekcji typu danych wejściowych = tekst, możliwe?

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

i robi to (przy użyciu jQuery)

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

przyczyny "bla bla bla", które zostaną wybrane z domyślnym niebieski kolor ciemny selekcji.

Czy istnieje sposób, aby zmienić ten kolor za pomocą css? css3 może zmienić zaznaczenie, używając na przykład

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

ale działa to tylko na tekst w innych elementach, a nie na wejściach html.

Wszelkie pomysły?

Źródło

2009-10-21 Tommy

Jeśli znajdziesz coś, zaktualizuj ten otwartej pytanie: http://stackoverflow.com/questions/2043695/textareaselection-and-moz-selection –

Jak temat konfigurowania wyglądu w arkuszu stylów, a następnie przy użyciu coś jak:

<style> 

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

</style> 

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

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

Źródło

2009-10-23 04:28:37 rydordy

ja nie wiem, jak to wpłynie na wybór kolor zaznaczenia w polu wejściowym (typ = tekst)? – Tommy

Nie sądzę, istnieje jakikolwiek sposób, aby to zrobić . Kolor wybranego tekstu jest ustalany na poziomie oprogramowania/os i nie jest czymś, co naprawdę można kontrolować za pomocą javascript. Wybór strony apl strona http://api.jquery.com/select/ wspomina kilka wtyczek, które powiedzą ci, jaki tekst został wybrany przez użytkownika. Jedyne, co mogę wymyślić, to próbowanie, gdy użytkownik wybierze jakiś tekst, usunie zaznaczony tekst i wstawi ten sam tekst zaznaczony w polu, który podświetli go w innym kolorze. Będą one jednak nadal zobaczyć, jak są one niebieskie podświetlenie ...

Źródło

2010-03-09 23:47:46 Finbarr

-1

dla moich wejść Używam tego w moich plikach CSS:

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

„Tekst” można zastąpić „textarea "," submit "... nawet działa z efektami hover, na przykład:

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

Mam nadzieję, że to może pomóc.

Źródło

2010-03-16 21:55:20 kevin

Działa to dla mnie, jeśli wybierzesz to, co chcesz ręcznie.

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

Testowane Firefox 4.0b6

To nie działa z funkcją jQuery jQuery ponieważ jest wybraniu elementu <input />, zamiast wybierać rzeczywisty tekst. Spróbuj czegoś podobnego do powyższego skryptu. Powinieneś zobaczyć, że działa.

Źródło

2010-11-02 12:34:27 ssice

-1

Dla moich wejść Używam tego w moich plikach CSS:

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

„Tekst” można zastąpić „textarea”, „wyślij” ... nawet współpracuje z efektów hover Przykład:

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

Mam nadzieję, że to pomoże.

Źródło

2011-03-15 00:59:00 Jon

Jestem prawie pewien, że nie można tego zrobić.Sprawdziłem to chwilę i skończyło się na użyciu znacznika div zamiast danych wejściowych i sprawiło, że wyglądało to jak pole wejściowe. To pozwoliło mi kontrolować i zmieniać podświetlony kolor zaznaczonego tekstu. Wtedy po prostu miałem dane wejściowe jako ukryte pole, które odpowiednio zaktualizowano.

To prawdopodobnie nie jest odpowiedź, której szukałeś, ale w ten sposób udało mi się obejść ten problem.

Źródło

2011-10-23 22:15:15 uadrive

to działa przynajmniej na moim FF 7.0.1:

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

Źródło

2011-10-24 21:24:17 Lycha

działa na mnie w Firefoksie (najnowsza wersja), ale to nie działa w Webkit. Oto test: http://jsfiddle.net/Gp8Rr/

Testowałem go w najnowszych wersjach Chrome, Safari i Firefox, a Firefox był jedynym, który działał. Może błąd, a może Webkit nie pozwala ci na stylizację tej części swojego interfejsu?

właśnie aktualizacjatutaj, aby przejść do nieco bardziej szczegółowo. ::selection to niestandardowy pseudoelement, co oznacza, że nawet jeśli most browsers support it nie masz żadnej gwarancji, że będą to robić, lub że nowe przeglądarki będą go obsługiwać. Więc używaj go, ale nie ograniczaj jego przydatności do użytkowania. Więcej informacji na ten temat można znaleźć pod adresem MDN.

Źródło

2011-10-31 19:14:04

Począwszy od 2015 roku wydaje się, że jest to [obsługiwane w wielu przeglądarkach] (http://caniuse.com/#feat=css-selection), w tym IE9 +, Chrome, Safari, Firefox. Dla przechodzących osób, powiedziałbym, że to powinna być akceptowana odpowiedź. – aug

-1

Czy tego chcesz? Tekst zmienia kolor na czerwony po wybraniu.

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

Źródło

2011-11-01 16:52:22 RickjS

Stylizacja koloru selekcji typu danych wejściowych = tekst, możliwe?

Odpowiedz

Powiązane problemy