Geek Answers Handbook

Change focus placeholder text color using JavaScript

I am trying to change the color of the placeholder text to white in focus. You can view the contact form here.

I tried using different CSS code, but most of the code doesn’t look the same in different browsers + I did some research, and now I see that there are some limitations when it comes to styling placeholders using CSS.

My question is: can I change the placeholder color to white with focus using JavaScript? I am not very familiar with writing JavaScript, but I would appreciate any help

+6
source share
2 answers

Believe me, you need vendor prefixes (From css-tricks.com):

::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; }

Using javascript, you will apply program style (using vendor prefixes) at the focus event.

Edit: In fact, these styles that I don't think can be applied using javascript. You will need to create a class and apply it using js.

CSS

 input.placeholderred::-webkit-input-placeholder { color: red; }

JQuery

 var $textInput = $('#TextField1'); $textInput.on('focusin', function () { $(this).addClass('placeholderred'); } ); $textInput.on('focusout', function () { $(this).removeClass('placeholderred'); } );

JS:

 var textInput = document.getElementById('TextField1'); textInput.addEventListener('focus', function () { this.classList.add('placeholderred'); } ); textInput.addEventListener('blur', function () { this.classList.remove('placeholderred'); } );

And the courtesy of the most useful, Armfoot, violin: http://jsfiddle.net/qbkkabra/2/

+7
source

This will only work with css and html

CSS

 input::-webkit-input-placeholder { color: #999; } input:focus::-webkit-input-placeholder { color: red; } /* Firefox < 19 */ input:-moz-placeholder { color: #999; } input:focus:-moz-placeholder { color: red; } /* Firefox > 19 */ input::-moz-placeholder { color: #999; } input:focus::-moz-placeholder { color: red; } /* Internet Explorer 10 */ input:-ms-input-placeholder { color: #999; } input:focus:-ms-input-placeholder { color: red; }

and html

 <input type='text' placeholder='Enter text' />
0
source

More articles:


All Articles