Modifying the input placeholder color with ng-style

I am working on setting the color of my input placeholder using a dynamic color defined in a $scope variable in my controller for my HTML code.

The $scope variable is structured as follows:

$scope.primaryColor={"color":colorVar}; //colorVar represents the color in hexadecimal

Since the color var has a dynamic value, I want to utilize ng-style on the input HTML tag to specify the color property for the placeholder inside the input field.

<input required name="email" ng-model="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cca4a58cbba4adb8a9baa9bee2afa3a1">[email protected]</a>" ng-style="">

I understand that changing the placeholder color property through inline CSS is not possible. Is there a way for me to pass the color var to CSS using ng-style or any other methods?

If so, how can I achieve this?

javascriptangularjs

Answer №1

To make it work, simply apply the ng-class to the vendor prefix

Sample HTML code:

 <input type="text" placeholder="Test Now" required="" 
class="ng-dirty ng-invalid ng-invalid-required ng-untouched">

CSS in SCSS format:

.ng-touched::-webkit-input-placeholder { color: blue; }
.ng-untouched::-webkit-input-placeholder { color: #ff9900; }

Answer №2

If you haven't experimented with generating a stylesheet dynamically yet, it might be worth giving it a try. While it may not be the most refined method, it is effective.

const customSheet = document.createElement('style');
document.body.appendChild(customSheet);
customSheet.innerHTML = '.btn-primary {background-color: ' + dynamicColor  + '!important;}';
customSheet.insertAdjacentHTML('beforeend', 'input::placeholder {color:' + dynamicColor + '!important;}');

To make this work, ensure your color variables are fetched from the database or wherever they are stored. Additionally, determine the appropriate location to incorporate this code into your application for optimal results.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining Laravel and VueJs for a Multi-Page Application (MPA)

I have recently developed a website using a combination of Laravel and VueJs. However, I am facing some confusion regarding the most suitable routing architecture to implement. Currently, my application has the following setup: The routing system is man ...

javascriptlaravelvue.js

What is the best way to empty the input field after a download event is completed in Node.JS?

For hours on end, I've been struggling with a persistent issue in my video downloader app. After successfully downloading a video, the input field where the URL is entered remains filled instead of clearing out. The screenshot below illustrates the p ...

javascriptnode.jsinputdownload

Hide jquery scroll bar

I am currently working on a WordPress plugin with the Twenty Thirteen theme. My goal is to display a modal when a div is clicked, and at that time I want to hide the scrollbar on the body of the page. Despite trying the following code snippet, it doesn&ap ...

javascriptjqueryhtmlcsswordpress

Confirm that step attribute is applied to input of number type

When working with the following HTML code, I encounter a challenge with validating the step: <form name="myForm"> <input type="number" name="test" min={{min}} max={{max}} step={{step}}> <div class="error-popup" ng-if="myForm.test.$touched & ...

angularjsregex

ajax is unable to decode a JSON string from a GET request

Currently, I am leveraging angularjs to retrieve userId, userTitle, and userComment from a form. These values are then sent to a PHP page from the controller for communication with a server. Everything works well when sending integers, but I face an issue ...

javascriptphpangularjsajax

Why is "undefined" being used to alert an ajax call response?

I am encountering an issue with a returned value from an AJAX request. The web method being referenced returns a boolean value of true or false. However, when attempting to access this value outside the AJAX method, I am receiving an "undefined" message :? ...

javascriptjqueryajax

Encountering an issue with npm start when attempting to launch the local host server for a React.js project

Encountering an issue with npm start Error message: 'Equipment' is not recognized as a command, operable program or batch file. internal/modules/cjs/loader.js:983 throw err; ^ Error: Module not found 'C:\Users\Home\Deskto ...

javascriptreactjsnpmnode-modulesreact-scripts

How about "Incorporate Google Auth into your Vue.js project with modular

I'm on the search for a project that showcases using Vue.js and the Google client library to authenticate with JavaScript, but without the need for transpilers, bundlers, or Node/npm. Does anyone know of such an example out there? I simply want to cre ...

javascriptgoogle-chromevue.jsgoogle-oauth

Working with React, with the choice of incorporating jsx or not

I am currently delving into the world of React and found myself able to run a simple app without using JSX. In my JavaScript file, I started with: class TestClass extends React.Component Do I really need to utilize JSX or can I just stick with JavaScript ...

javascriptreactjs

Unit testing is encountering issues due to errors with objects not being accepted as a React child component

Here is the code where I am testing the functionality of mytestFunc when a checkbox is checked. Checkbox - <input id="mycheck" type="checkbox" onClick={this.mytestFunc} /> mytestFunc function - mytestFunc = e => { const mockdata = this.stat ...

javascriptreactjsunit-testingjestjsenzyme

Ensuring form accuracy upon submission in AngularJS 1.5: Understanding the $invalid state in relation to $pristine field

When loading data in a form, I want to allow the user to submit data only if the form is valid. Initially, the form is pristine but invalid. If the user edits any one of the three fields, the form is no longer pristine, which is acceptable. However, the ...

javascriptjqueryangularjsformsvalidation

ngGrid: cellTemplate unable to capture user inputs

I'm currently using ngGrid to collect data. I'm facing difficulty in updating $scope.myData on submission after entering inputs in a CellTemplate within the age columns. Query: How can I capture data with cellTemplates and obtain an updated $sc ...

angularjsng-grid

Issue with rendering Angular templates

Having just embarked on my AngularJS journey, I'm currently facing an issue with this specific code snippet. The following is an excerpt from my JavaScript file named cribsController.js: angular .module('ngCribs') .controller('cribsCo ...

javascriptangularjs

Cleve js does not include delimiters in its date output

In my Vue.js project, I decided to implement a date input field using cleave.js. After passing the following options: options="{date: true, delimiter: '/', datePattern: ['m', 'd', 'Y']}" I encountered an issue wh ...

javascriptvue.jscleave

Transform a checkbox input into two distinct buttons

I am trying to change the input checkbox that toggles between light and dark mode into two separate buttons. How can I achieve this functionality? Check out the demo here: https://jsfiddle.net/ot1ecnxz/1 Here is the HTML code: <input type="checkb ...

javascripttwitter-bootstrapbootstrap-5

Is it possible to delete an element from both local storage and HTML by referencing its ID?

Experience a simple flashcard game where you enter a question and answer to create a new flash card stored as an object within the cards array. The newly created flash card is also displayed by appending a new element to the flash cards section on the webp ...

javascripthtmllocal-storage

Launching a call to action through Ajax in Zend Framework triggers a redirect, but subsequent calls prove to be effective

I've encountered an intriguing issue that I'm hoping someone else has come across and resolved before. In this particular application, I have implemented a 'change my password' option for users. If a user forgets their password, they c ...

javascriptajaxzend-frameworkjquery

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

I created the following code. However, when I scroll down the table, the header disappears from view. I would like the header to always remain at the top, even when scrolling. Despite searching Google multiple times and trying various solutions, I have no ...

javascripthtmlcsstwitter-bootstrap

Performing a Javascript validation to ensure that a value falls within

How can I check if an input number falls within a specified range? I need to display if it is within the range, higher, or lower than the acceptable range. My current Javascript code seems to be causing an error message stating it is an invalid entry. It ...

javascriptnumbersrangedecimal

Increasing the identifier of duplicated input fields using jQuery

There is a specific section in my form that consists of a select box and three checkboxes, which needs to be duplicated on request. While I have successfully cloned the div and incremented its specific div, I am facing challenges in incrementing the checkb ...

javascriptphpjqueryhtmlwordpress