Наличие ввода
<input type="text" id="myTest" value="bla bla bla"/>
и делать это (используя jQuery)
$('#myTest').select();
заставляет "bla bla bla" выбираться с цветом синего цвета по умолчанию.
Теперь, можно ли каким-либо образом изменить этот цвет с помощью css? css3 может изменять выбор, используя, например,
::-moz-selection {
background: #ffb7b7;
}
но это работает только с текстом в других элементах, а не в html-входах.
Любые идеи?
/Т
Работает для меня в Firefox (последняя версия), но в Webkit это не работает. Здесь тест: http://jsfiddle.net/Gp8Rr/
Я тестировал его в последних версиях Chrome, Safari и Firefox, и Firefox был единственным, кто работал. Может быть, ошибка, или, может быть, Webkit не позволяет вам стилизовать эту часть своего интерфейса?
Просто update здесь, чтобы перейти к более подробному описанию. ::selection является нестандартным псевдоэлементом, а это означает, что даже если большинство браузеров поддерживает его, у вас нет гарантии, что они будут продолжать делать так, или что новые браузеры будут поддерживать его. Так что продолжайте использовать его, но не делайте это необходимым для использования вашего сайта. Подробнее о этой теме в MDN.
Я не думаю, что есть способ сделать это. Цвет выделенного текста определяется на уровне программного обеспечения /os и не является тем, что вы действительно можете контролировать с помощью javascript. На странице выбора api http://api.jquery.com/select/ упоминаются несколько плагинов, которые расскажут вам, какой текст пользователь выбрал. Единственное, что я могу придумать, - это когда пользователь выбирает какой-либо текст, вы удаляете текст, который они выбрали, и вставляете тот же текст, помеченный в промежутке, который выделяет его другим цветом. Тем не менее, они все равно будут видеть синий цвет, поскольку они выделяют...
Он работает для меня, если вы выберите то, что хотите вручную.
<!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>
Протестировано в Firefox 4.0b6
Он не работает с вашей функцией jQuery, потому что jQuery выбирает ваш элемент <input /> вместо того, чтобы выбирать фактический текст. Попробуйте что-то вроде script выше. Вы должны увидеть, как он работает.
Я уверен, что этого не может быть сделано. Я просмотрел это некоторое время назад и в итоге использовал тег div вместо ввода и сделал его похожим на поле ввода. Это позволило мне контролировать и изменять выделенный цвет выделенного текста. Тогда у меня только что был введен как скрытое поле, которое обновилось соответствующим образом.
Это, вероятно, не тот ответ, который вы искали, но именно так я смог обойти эту проблему.
Это работает, по крайней мере, на моем FF 7.0.1:
input::-moz-selection {
background-color: green;
}
Как настроить внешний вид в таблице стилей, а затем использовать что-то вроде:
< style >
.selected-look{color:somehex, border:; font-family:; background:;} // etc;
< / style>
$('#myTest').toggleClass('selected-look').select();
или $('#myTest').select().toggleClass('selected-look');
Для моих входов я использую это в моих файлах css:
input[type="text"] { /* css properties */}
"текст" можно заменить на "textarea", "submit"... даже работает с эффектами зависания, например:
#area-restrita input[type='submit']:hover { background-color:#CCC; color:#FFF;}
Надеюсь, это поможет.
Для моих входов я использую это в моих файлах css:
input[type="text"] { /* cssproperties */ }
"текст" можно заменить на "textarea", "submit"... даже работает с эффектами зависания, например:
#area-restrita input[type='submit']:hover {background-color:#CCC; color:#FFF;}
Надеюсь, это поможет.
Это то, что вы хотите? Текст становится красным после его выбора.
$("input").select(function(){
$("input").css("color","red");
});