input, text area styling after changing text?
Question
I have one text area/input[type=text]. I want to style its background color to changed when someone click into text area.. this is happening with input:focus
till here its fine but i want this styling to remain if user changes or types in some text.. if user doesn't type anything its background color will be back to white... if typed some text background color will stay red... I'm having trouble with second part... my sample html
<input placeholder='What should I call you?' type='text'>
css i'm trying..
input:focus, input.active,
select:focus,
select.active,
textarea:focus,
textarea.active {
background: red;
}
input{
background:white;
}
2 answers
solution1
2 2016-02-21 08:37:58
have you tried using the onChange event?
See this plunker - is that what you're attempting to accomplish?
// Code goes here function changed(element){ element.style.background = 'red'; };
/* Styles go here */ input:focus, input.active, select:focus, select.active, textarea:focus, textarea.active { background: red; } input{ background:white; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <input placeholder='What should I call you?' type='text' onChange=changed(this)> </body> </html>
solution2
2 ACCPTED 2016-02-21 09:02:27
++ you have to consider when user typed text or removed text from input, when user typed something background should get color but when user removed that text it should back to white, not only on focus or blur . you should use jquery because css can not understand is there any text in field or not.
$('#myInput').focus(function(){
$(this).css('backgroundColor','red');
});
$('#myInput').blur(function(){
if($(this).val().length > 0) {
$(this).css('backgroundColor','red');
} else {
$(this).css('backgroundColor','white');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.