How to update placeholder color using Javascript?
I'm searching online and I didn't find anything.
I'm trying to update the placeholder color of a textbox using javascript, but how can I do that?
I have a color picker and the color is changing.
If I have something like this in my CSS, how can I update it?
::placeholder {
color: red;
}<input placeholder="placeholder" />Is there a javascript command to edit this?
Something like
document.getElementById('text').style.placeholderColor = newColor;
javascript html css
edited 13 hours ago
Temani Afif
73.7k94184
asked 14 hours ago
Manuel RizzoManuel Rizzo
14512
add a comment |
I'm searching online and I didn't find anything.
I'm trying to update the placeholder color of a textbox using javascript, but how can I do that?
I have a color picker and the color is changing.
If I have something like this in my CSS, how can I update it?
::placeholder {
color: red;
}<input placeholder="placeholder" />Is there a javascript command to edit this?
Something like
document.getElementById('text').style.placeholderColor = newColor;
javascript html css
edited 13 hours ago
Temani Afif
73.7k94184
asked 14 hours ago
Manuel RizzoManuel Rizzo
14512
add a comment |
I'm searching online and I didn't find anything.
I'm trying to update the placeholder color of a textbox using javascript, but how can I do that?
I have a color picker and the color is changing.
If I have something like this in my CSS, how can I update it?
::placeholder {
color: red;
}<input placeholder="placeholder" />Is there a javascript command to edit this?
Something like
document.getElementById('text').style.placeholderColor = newColor;
javascript html css
edited 13 hours ago
Temani Afif
73.7k94184
asked 14 hours ago
Manuel RizzoManuel Rizzo
14512
I'm searching online and I didn't find anything.
I'm trying to update the placeholder color of a textbox using javascript, but how can I do that?
I have a color picker and the color is changing.
If I have something like this in my CSS, how can I update it?
::placeholder {
color: red;
}<input placeholder="placeholder" />Is there a javascript command to edit this?
Something like
document.getElementById('text').style.placeholderColor = newColor;
::placeholder {
color: red;
}<input placeholder="placeholder" />::placeholder {
color: red;
}<input placeholder="placeholder" />javascript html css
javascript html css
edited 13 hours ago
Temani Afif
73.7k94184
asked 14 hours ago
Manuel RizzoManuel Rizzo
14512
edited 13 hours ago
Temani Afif
73.7k94184
asked 14 hours ago
Manuel RizzoManuel Rizzo
14512
edited 13 hours ago
Temani Afif
73.7k94184
edited 13 hours ago
Temani Afif
73.7k94184
edited 13 hours ago
Temani Afif
73.7k94184
73.7k94184
asked 14 hours ago
Manuel RizzoManuel Rizzo
14512
asked 14 hours ago
Manuel RizzoManuel Rizzo
14512
asked 14 hours ago
Manuel RizzoManuel Rizzo
14512
14512
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Use CSS variables. You can also target only the needed element
function update() {
document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}::placeholder {
color: var(--c, red);
}<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>CSS variable are useful when it comes to modify pseudo-class/pseudo-element that you cannot access with JS such as :before/:after/::placeholer/::selection, etc. You simply define your property using a variable that you can easily update on the element.
Related : https://stackoverflow.com/a/49618941/8620333
answered 14 hours ago
Temani AfifTemani Afif
73.7k94184
Very nice, you just reminded me they existed. Thinking about, would be nice to have a ie11 supported version of this answer too...maybe later if I have time can contribute!
– Mel Macaluso
14 hours ago
@MelMacaluso for the ie11 version we can use a class we toggle that contains the color (not very flexible though)
– Temani Afif
14 hours ago
@DogukanCavus red is the default value ... blue will be set to only the first one when clicking the button
– Temani Afif
14 hours ago
ok I don't understand sorry.
– Dogukan Cavus
14 hours ago
@TemaniAfif of course we can, I was hinting how we can do that with flexibility ahah
– Mel Macaluso
12 hours ago
add a comment |
As stated in the other answers, you cannot change pseudo-element styles inline. However, you can modify the CSS rule in the <style> itself, and you don't need a browser support ing CSS variables for that. Access the stylesheet and either get the existing rule or insert your own, then play with its style declarations like you would with an element .style:
const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;
placeholderStyle.color = "red";
Object.assign(document.body.appendChild(document.createElement("input")), {
type: "button", value: "Color!", onclick() {
placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
}});<input placeholder="placeholder" />answered 6 hours ago
BergiBergi
372k58557884
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54749402%2fhow-to-update-placeholder-color-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use CSS variables. You can also target only the needed element
function update() {
document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}::placeholder {
color: var(--c, red);
}<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>CSS variable are useful when it comes to modify pseudo-class/pseudo-element that you cannot access with JS such as :before/:after/::placeholer/::selection, etc. You simply define your property using a variable that you can easily update on the element.
Related : https://stackoverflow.com/a/49618941/8620333
answered 14 hours ago
Temani AfifTemani Afif
73.7k94184
Very nice, you just reminded me they existed. Thinking about, would be nice to have a ie11 supported version of this answer too...maybe later if I have time can contribute!
– Mel Macaluso
14 hours ago
@MelMacaluso for the ie11 version we can use a class we toggle that contains the color (not very flexible though)
– Temani Afif
14 hours ago
@DogukanCavus red is the default value ... blue will be set to only the first one when clicking the button
– Temani Afif
14 hours ago
ok I don't understand sorry.
– Dogukan Cavus
14 hours ago
@TemaniAfif of course we can, I was hinting how we can do that with flexibility ahah
– Mel Macaluso
12 hours ago
add a comment |
Use CSS variables. You can also target only the needed element
function update() {
document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}::placeholder {
color: var(--c, red);
}<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>CSS variable are useful when it comes to modify pseudo-class/pseudo-element that you cannot access with JS such as :before/:after/::placeholer/::selection, etc. You simply define your property using a variable that you can easily update on the element.
Related : https://stackoverflow.com/a/49618941/8620333
answered 14 hours ago
Temani AfifTemani Afif
73.7k94184
Very nice, you just reminded me they existed. Thinking about, would be nice to have a ie11 supported version of this answer too...maybe later if I have time can contribute!
– Mel Macaluso
14 hours ago
@MelMacaluso for the ie11 version we can use a class we toggle that contains the color (not very flexible though)
– Temani Afif
14 hours ago
@DogukanCavus red is the default value ... blue will be set to only the first one when clicking the button
– Temani Afif
14 hours ago
ok I don't understand sorry.
– Dogukan Cavus
14 hours ago
@TemaniAfif of course we can, I was hinting how we can do that with flexibility ahah
– Mel Macaluso
12 hours ago
add a comment |
Use CSS variables. You can also target only the needed element
function update() {
document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}::placeholder {
color: var(--c, red);
}<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>CSS variable are useful when it comes to modify pseudo-class/pseudo-element that you cannot access with JS such as :before/:after/::placeholer/::selection, etc. You simply define your property using a variable that you can easily update on the element.
Related : https://stackoverflow.com/a/49618941/8620333
answered 14 hours ago
Temani AfifTemani Afif
73.7k94184
Use CSS variables. You can also target only the needed element
function update() {
document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}::placeholder {
color: var(--c, red);
}<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>CSS variable are useful when it comes to modify pseudo-class/pseudo-element that you cannot access with JS such as :before/:after/::placeholer/::selection, etc. You simply define your property using a variable that you can easily update on the element.
Related : https://stackoverflow.com/a/49618941/8620333
function update() {
document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}::placeholder {
color: var(--c, red);
}<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>function update() {
document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}::placeholder {
color: var(--c, red);
}<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>answered 14 hours ago
Temani AfifTemani Afif
73.7k94184
edited 14 hours ago
answered 14 hours ago
Temani AfifTemani Afif
73.7k94184
answered 14 hours ago
Temani AfifTemani Afif
73.7k94184
answered 14 hours ago
Temani AfifTemani Afif
73.7k94184
73.7k94184
Very nice, you just reminded me they existed. Thinking about, would be nice to have a ie11 supported version of this answer too...maybe later if I have time can contribute!
– Mel Macaluso
14 hours ago
@MelMacaluso for the ie11 version we can use a class we toggle that contains the color (not very flexible though)
– Temani Afif
14 hours ago
@DogukanCavus red is the default value ... blue will be set to only the first one when clicking the button
– Temani Afif
14 hours ago
ok I don't understand sorry.
– Dogukan Cavus
14 hours ago
@TemaniAfif of course we can, I was hinting how we can do that with flexibility ahah
– Mel Macaluso
12 hours ago
add a comment |
Very nice, you just reminded me they existed. Thinking about, would be nice to have a ie11 supported version of this answer too...maybe later if I have time can contribute!
– Mel Macaluso
14 hours ago
@MelMacaluso for the ie11 version we can use a class we toggle that contains the color (not very flexible though)
– Temani Afif
14 hours ago
@DogukanCavus red is the default value ... blue will be set to only the first one when clicking the button
– Temani Afif
14 hours ago
ok I don't understand sorry.
– Dogukan Cavus
14 hours ago
@TemaniAfif of course we can, I was hinting how we can do that with flexibility ahah
– Mel Macaluso
12 hours ago
Very nice, you just reminded me they existed. Thinking about, would be nice to have a ie11 supported version of this answer too...maybe later if I have time can contribute!
– Mel Macaluso
14 hours ago
Very nice, you just reminded me they existed. Thinking about, would be nice to have a ie11 supported version of this answer too...maybe later if I have time can contribute!
– Mel Macaluso
14 hours ago
@MelMacaluso for the ie11 version we can use a class we toggle that contains the color (not very flexible though)
– Temani Afif
14 hours ago
@MelMacaluso for the ie11 version we can use a class we toggle that contains the color (not very flexible though)
– Temani Afif
14 hours ago
@DogukanCavus red is the default value ... blue will be set to only the first one when clicking the button
– Temani Afif
14 hours ago
@DogukanCavus red is the default value ... blue will be set to only the first one when clicking the button
– Temani Afif
14 hours ago
ok I don't understand sorry.
– Dogukan Cavus
14 hours ago
ok I don't understand sorry.
– Dogukan Cavus
14 hours ago
@TemaniAfif of course we can, I was hinting how we can do that with flexibility ahah
– Mel Macaluso
12 hours ago
@TemaniAfif of course we can, I was hinting how we can do that with flexibility ahah
– Mel Macaluso
12 hours ago
add a comment |
As stated in the other answers, you cannot change pseudo-element styles inline. However, you can modify the CSS rule in the <style> itself, and you don't need a browser support ing CSS variables for that. Access the stylesheet and either get the existing rule or insert your own, then play with its style declarations like you would with an element .style:
const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;
placeholderStyle.color = "red";
Object.assign(document.body.appendChild(document.createElement("input")), {
type: "button", value: "Color!", onclick() {
placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
}});<input placeholder="placeholder" />answered 6 hours ago
BergiBergi
372k58557884
add a comment |
As stated in the other answers, you cannot change pseudo-element styles inline. However, you can modify the CSS rule in the <style> itself, and you don't need a browser support ing CSS variables for that. Access the stylesheet and either get the existing rule or insert your own, then play with its style declarations like you would with an element .style:
const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;
placeholderStyle.color = "red";
Object.assign(document.body.appendChild(document.createElement("input")), {
type: "button", value: "Color!", onclick() {
placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
}});<input placeholder="placeholder" />answered 6 hours ago
BergiBergi
372k58557884
add a comment |
As stated in the other answers, you cannot change pseudo-element styles inline. However, you can modify the CSS rule in the <style> itself, and you don't need a browser support ing CSS variables for that. Access the stylesheet and either get the existing rule or insert your own, then play with its style declarations like you would with an element .style:
const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;
placeholderStyle.color = "red";
Object.assign(document.body.appendChild(document.createElement("input")), {
type: "button", value: "Color!", onclick() {
placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
}});<input placeholder="placeholder" />answered 6 hours ago
BergiBergi
372k58557884
As stated in the other answers, you cannot change pseudo-element styles inline. However, you can modify the CSS rule in the <style> itself, and you don't need a browser support ing CSS variables for that. Access the stylesheet and either get the existing rule or insert your own, then play with its style declarations like you would with an element .style:
const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;
placeholderStyle.color = "red";
Object.assign(document.body.appendChild(document.createElement("input")), {
type: "button", value: "Color!", onclick() {
placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
}});<input placeholder="placeholder" />const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;
placeholderStyle.color = "red";
Object.assign(document.body.appendChild(document.createElement("input")), {
type: "button", value: "Color!", onclick() {
placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
}});<input placeholder="placeholder" />const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;
placeholderStyle.color = "red";
Object.assign(document.body.appendChild(document.createElement("input")), {
type: "button", value: "Color!", onclick() {
placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
}});<input placeholder="placeholder" />answered 6 hours ago
BergiBergi
372k58557884
answered 6 hours ago
BergiBergi
372k58557884
answered 6 hours ago
BergiBergi
372k58557884
answered 6 hours ago
BergiBergi
372k58557884
372k58557884
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54749402%2fhow-to-update-placeholder-color-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
