Styling the selection color of an input type=text, possible?
Having an input
<input type="text" id="myTest" value="bla bla bla"/>
开发者_如何学JAVAand doing this (using jQuery)
$('#myTest').select();
causes "bla bla bla" to be selected with default dark blue selection color.
Now, is there any way I can change this color using css? css3 can change selection using for instance
::-moz-selection {
background: #ffb7b7;
}
but this only works on text in other elements, not in html inputs.
Any ideas?
/T
Works for me in Firefox (latest version) but it doesn't work in Webkit. Here's a test: http://jsfiddle.net/Gp8Rr/
I tested it in latest versions of Chrome, Safari, and Firefox, and Firefox was the only one that worked. Maybe a bug, or maybe Webkit doesn't allow you to style that part of their UI?
Just an update here, to go into a little more detail. ::selection is a non-standard pseudo-element, which means that even though most browsers support it you have no guarantee that they will continue to do so, or that new browsers will support it. So go ahead and use it, but don’t make it essential to the useability of your site. There’s more on this topic over at the MDN.
I do not think there is any way to do this. The color of selected text is decided at the software/os level and is not something you can really control with javascript. The select api page http://api.jquery.com/select/ mentions several plugins that will tell you what text the user has selected. The only thing I can think of trying is when the user selects some text, you remove the text they have selected and insert the same text, marked up in a span that will highlight it in a different color. However, they will still see the blue as they are highlighting...
It works for me if you select what you want manually.
<!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>
Tested in Firefox 4.0b6
It is not working with your jQuery function because jQuery is selecting your <input /> element, instead of selecting the actual text. Try something like the script above. You should see it working.
I'm pretty sure this can't be done. I looked into this a while back and ended up using a div tag in place of an input and made it look like an input field. That allowed me to control and change the highlighted color of the selected text. Then I just had the input as a hidden field that updated accordingly.
This probably isn't the answer you were looking for, but that was how I was able to work around the issue.
This does work at least on my FF 7.0.1:
input::-moz-selection {
background-color: green;
}
How about setting up the look in the style sheet and then using something like:
< style >
.selected-look{color:somehex, border:; font-family:; background:;} // etc;
< / style>
$('#myTest').toggleClass('selected-look').select();
or $('#myTest').select().toggleClass('selected-look');
For my inputs i use this in my css files:
input[type="text"] { /* css properties */ }
the "text" can be replaced with "textarea", "submit"... even works with hover effects, exemple:
#area-restrita input[type='submit']:hover { background-color:#CCC; color:#FFF;}
Hope it can help.
For my inputs i use this in my css files:
input[type="text"] { /* cssproperties */ }
the "text" can be replaced with "textarea", "submit"... even works with hover effects, example:
#area-restrita input[type='submit']:hover {background-color:#CCC; color:#FFF;}
Hope it can help.
Is this what you want? The text turns red after it is selected.
$("input").select(function(){
$("input").css("color","red");
});
加载中,请稍侯......
精彩评论