Is it possible to change the placeholder text color to white when focused using JavaScript? CSS styling doesn't seem to work consistently across different browsers. Here is the contact form for reference: here.
I've experimented with various CSS codes but noticed limitations in styling placeholders. After researching further, I am now wondering if JavaScript can help achieve this effect. I don't have much experience with writing JavaScript, so any guidance would be greatly appreciated.
One might believe that vendor prefixes are necessary (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;
}
If using javascript, the application of similar styling with vendor prefixes could be done programmatically on a focus event.
Edit: Actually, I don't think these styles can be applied using javascript. Instead, you would 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');
}
);
Special thanks to Armfoot for providing a helpful fiddle: http://jsfiddle.net/qbkkabra/2/
To achieve this effect, you only need 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;
}
with some HTML:
<input type='text' placeholder='Enter text' />
UPDATE: The alignment has been corrected by adding floats. However, the height still doesn't fill 100%. Check out the new look: Image Link In my footer container, I want to arrange 3 columns (colored green, white, and red for clarity). Currently, the ...
Within my React code base, I have a material-ui ListItem that looks like this: <ListItem button key={currIndex} onMouseOver={handleOnMouseClickOnListItem}> The handler function in my code (using Flow typing) is as follows: const handleOnMouseClic ...
Before you approve and publish, please take note: You are about to give your approval for the Industry Formile Deliverable. The content will be rendered when the specified condition is met. div class="form-group" ...
I have a contenteditable div element with the class ".textarea_mask." <div class=".textarea_mask" contenteditable ></div> My goal is to make this div act like a text area. It functions correctly in modern browsers, but I am having issues with ...
Currently, my wordpress website allows login via Facebook using the JS SDK. I am new to Facebook's API and still trying to understand how it all works. Now, I want to implement various checks before allowing users to perform certain actions. For exam ...
Can you figure out why the first column in this sample table is so much wider than the others? <html> <head> <style type="text/css"> table,th, td,{ width:100%; border: 4px solid; border-collapse:collapse; ...
Is it possible to create a gallery slideshow feature where the selected thumbnail's image source will be displayed in the main image container? I believe I can implement that part successfully. Currently, my challenge is defining the thumbnail scroll ...
Is there a way to shim moment.js in webpack similar to how it is done in browserify? I have developed a widget using npm and webpack, which will be included in another application. The other app already has moment.js loaded via a script tag. I want to av ...
The Image photo for the containerI've been experimenting with the display:flex property in my card-container class and trying to use justify-content to center it, but the content inside the box isn't responding to the changes. Can anyone point ou ...
Attempting to implement this plugin in my Ionic 5 application: https://www.npmjs.com/package/cordova-plugin-k-nfc-acr122u I have added the plugin using cordova plugin add cordova-plugin-k-nfc-acr122u but I am unsure of how to use it. The plugin declares: ...
I need assistance with deleting multiple links using ajax: <a id="id-1">link1</a> <a id="id-2">link2</a> <a id="id-3">link2</a> <a id="id-4">link2</a> ... This is the simplified version of my code: $(docum ...
Upon a new user registration on my website, I aim to create a Stripe customer ID along with username and email for database storage. The process of customer creation seems to be working as evidenced by the activity in the Stripe test dashboard. However, h ...
My website is currently hosted on a test server at medexcel.comeze.com. However, I am encountering an issue where the overflow of the top div is no longer hidden when I hover over a menu button in the top bar. This results in the bottom right corner of th ...
I am attempting to establish a connection between my server side, which is PHP Laravel with Echo WebSocket, and Angular 4. I have attempted to use both ng2-socket-io via npm and laravel-echo via npm, but unfortunately neither were successful. If anyone h ...
In the process of creating a wizard, I have designed each step to remain hidden until the user reaches that specific stage. The second step of the form is dynamically generated based on the input provided in the first step. Here is a glimpse of how it all ...
Even though I was able to get the desired output by clicking "submit" a second time, the first time still gives me an empty array. function App() { const {handleSubmit, register} = useForm() const [values, setValues] = useState([]) const onSubmit ...
I've recently developed a directive for my Angular app, using templateUrl to access the template. Everything worked smoothly on my local server, but upon hosting it on Firebase, an error message kept popping up - WARNING: Tried to load angular more ...
Currently, I am tasked with updating an old website that includes a popup box containing an iFrame and nested tables. The content within these tables consists of text and two input boxes at the bottom. Everything within the box looks fine on screen resolu ...
Just starting to explore Flexbox and having a tough time working with a Navbar. My goal is to have the site title on the far left and the buttons on the far right. I've experimented with different flexbox combinations, but I just can't seem to g ...
Everything was working fine with my Node.js/Express API on PORT:3001 and Next.js front-end on PORT:3000 until I decided to implement cookies to store the JWT and send it back to the API with each request. After a user logs in from the browser, I set the c ...