I need to hightlight the text inside the textarea using css. Text should to be highlighted by default.
I have textarea which is normal. Where user type something. I need the text should have some background-color.Not the background-color of textarea. Jus the for the text.
Anyone pls help..
I presume you mean having the text selected so it can be removed when the user starts typing or copied to the clipboard. You cannot accomplish such thing with CSS: you need to use JavaScript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
window.onload = function(){
var t = document.getElementsByTagName("textarea");
for(var i=0, len=t.length; i<len; i++){
t[i].select();
}
}
//--></script>
</head>
<body>
<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
</body>
</html>
Since you can only have one selected item at a time, it's probably more interesting to select text on focus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
window.onload = function(){
var t = document.getElementsByTagName("textarea");
for(var i=0, len=t.length; i<len; i++){
t[i].onfocus = function(e){
e.target.select();
}
}
}
//--></script>
</head>
<body>
<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
<textarea>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</body>
</html>
Disclaimer: this sample code is not tested and probably buggy.
Do you mean this?
textarea{
background-color: #FFEFC6;
}
You can't do this in HTML/CSS. Textarea is a block level element and the text inside would need to be wrapped in an inline level element to give it separate highlighting. Try to hack something out from a trimmed down simple WYSIWYG like http://code.google.com/p/jwysiwyg/