Стилизация цвета выбора типа ввода = текст, возможно?

Имея входСтилизация цвета выбора типа ввода = текст, возможно?

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

и делать это (с помощью JQuery)

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

причины «бла-бла-бла», чтобы быть выбран по умолчанию темно-синий цвет выбора.

Теперь, можно ли каким-либо образом изменить этот цвет, используя css? CSS3 может изменить выбор, используя, например

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

, но это работает только на тексте в других элементах, а не в HTML входов.

Любые идеи?

источник

2009-10-21 Tommy

Если вы нашли что-нибудь, пожалуйста, обновите этот открытый вопрос: http://stackoverflow.com/questions/2043695/textareaselection-and-moz-selection –

Как о настройке внешнего вида в таблице стилей, а затем использовать что-то вроде:

<style> 

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

</style> 

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

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

источник

2009-10-23 04:28:37 rydordy

Я не вижу, как это будет влиять на выбор цвет выделения в поле ввода (тип = текст)? – Tommy

Я не думаю, что есть какой-нибудь способ сделать это , Цвет выделенного текста определяется на уровне программного обеспечения/os и не является тем, что вы действительно можете контролировать с помощью javascript. На странице api на странице http://api.jquery.com/select/ упоминаются несколько плагинов, которые расскажут вам, какой текст пользователь выбрал. Единственное, что я могу придумать, - это когда пользователь выбирает какой-либо текст, вы удаляете текст, который они выбрали, и вставляете тот же текст, помеченный в промежутке, который выделяет его другим цветом. Тем не менее, они все равно будут видеть синий, как они выдвигают на первый план ...

источник

2010-03-09 23:47:46 Finbarr

-1

Для моих входов я использую это в моих CSS файлов:

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

«Текст» можно заменить на «текстовое поле »,« submit »... даже работает с эффектами зависания, например:

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

Надеюсь, это поможет.

источник

2010-03-16 21:55:20 kevin

Это работает для меня, если вы выберете нужное вручную.

<!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 /> элемент, вместо того, чтобы выбрать фактический текст. Попробуйте что-то вроде сценария выше. Вы должны увидеть, как он работает.

источник

2010-11-02 12:34:27 ssice

-1

Для моих входов я использую это в моих CSS файлов:

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

«Текст» можно заменить на «текстовое поле», «представить» ... даже работает с эффектами перекатывания, например:

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

Надеюсь, это поможет.

источник

2011-03-15 00:59:00 Jon

Я уверен, что этого не может быть сделано.Я просмотрел это некоторое время назад и в итоге использовал тег div вместо ввода и сделал его похожим на поле ввода. Это позволило мне контролировать и изменять выделенный цвет выделенного текста. Тогда у меня только что был введен как скрытое поле, которое обновилось соответствующим образом.

Возможно, это не тот ответ, который вы искали, но именно так я смог обойти эту проблему.

источник

2011-10-23 22:15:15 uadrive

Это делает работу, по крайней мере на моем FF 7.0.1:

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

источник

2011-10-24 21:24:17 Lycha

работают для меня в Firefox (последняя версия), но он не работает в Webkit. Вот тест: http://jsfiddle.net/Gp8Rr/

Я тестировал его в последних версиях Chrome, Safari и Firefox, и Firefox был единственным, кто работал. Может быть, ошибка, или, может быть, Webkit не позволяет вам стилизовать эту часть своего пользовательского интерфейса?

Просто обновление здесь, чтобы перейти в немного более подробно. ::selection - это нестандартный псевдоэлемент, а это значит, что даже если most browsers support it у вас нет гарантии, что они будут продолжать это делать или что новые браузеры будут его поддерживать. Так что продолжайте использовать его, но не делайте это необходимым для использования вашего сайта. На этой странице есть еще одна тема: MDN.

источник

2011-10-31 19:14:04

С 2015 года это похоже [поддерживается во многих браузерах] (http://caniuse.com/#feat=css-selection), включая IE9 +, Chrome, Safari, Firefox. Для людей, проходящих мимо, я бы сказал, что это должен быть принятый ответ. – aug

-1

Это то, что вы хотите? Текст становится красным после его выбора.

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

источник

2011-11-01 16:52:22 RickjS

Стилизация цвета выбора типа ввода = текст, возможно?

ответ

Смежные вопросы