CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
ryanpika
ryanpika

Reputation: 151

Javascript: how to change contenteditable div placeholder color

I want to us javascript to change the placeholder color of the contenteditable div when an event triggered. But what is Javascript/Jquery selector for this big guy?

I tried:

$("#topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before").css({"color":"blue"});

Demo

<div id="topic_content_input" contenteditable="true" data-placeholder="I want to change my color on click " ></div>

<style>
    #topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before {
        content: attr(data-placeholder);
        float: left;
        margin-left: 2px;
        color: rgba(134,134,134,0.6);
    }
</style>

Upvotes: 1

Views: 353

Answers (1)

ketan
ketan

Reputation: 19341

You can do like following way using JQuery. Use addClass.

jQuery(function($){
    $("#topic_content_input").click(function(){
        $(this).addClass('placeholder');
    });
});
.topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before {
        content: attr(data-placeholder);
        float: left;
        margin-left: 2px;
        color: rgba(134,134,134,0.6);
    }
    
.placeholder[data-placeholder]:not([data-div-placeholder-content]):before {
    color: rgba(0,0,255,1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topic_content_input" class="topic_content_input" contenteditable="true" data-placeholder="I want to change my color on click " ></div>

Upvotes: 1

Related Questions