How to change styles for textarea placeholder which is controlled by the CodeMirror?

Question

I am using the CodeMirror plugin with version 5.65.7 for my textarea in a web application based on Vuejs, and everything is working fine without any issues. I would like to add the placeholder to my textarea, so I have added the respective placeholder file to my application and can see the placeholder in my textarea.

I would like to change the font color of the placeholder and centre align it, so I tried to make some modifications to the codemirror styles, but for some reason it’s not working at all. Could you please tell me how to change the font colour and centre the placeholder for the CodeMirror-controlled textarea?

I looked at a similar question here: Placeholder font colour" and tried to do the same, but for some reason it’s not working.

I have created a sample project based on my real application to demonstrate the issue in CodeSandBox.

I tried to look into devtools and tried but it's not working as expected. Can someone please let me know what I'm doing wrong and provide some workaround?

Following is the code sample which is also available in CodeSandBox:

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-5 offset-md-1 mt-5 mr-2 mb-2 pt-2">
        <textarea
          id="jsonEvents"
          ref="jsonEvents"
          v-model="jsonEvents"
          class="form-control"
          placeholder="Document in JSON format"
          spellcheck="false"
          data-gramm="false"
        />
      </div>

      <div class="col-md-5 offset-md-1 mt-5 mr-2 mb-2 pt-2">
        <textarea
          id="xmlEvents"
          ref="xmlEvents"
          v-model="xmlEvents"
          class="form-control"
          placeholder="Document in XML format"
          spellcheck="false"
          data-gramm="false"
        />
      </div>
    </div>
  </div>
</template>

<script>
let CodeMirror = null;

if (typeof window !== "undefined" && typeof window.navigator !== "undefined") {
  CodeMirror = require("codemirror");
  require("codemirror/mode/xml/xml.js");
  require("codemirror/mode/javascript/javascript.js");
  require("codemirror/lib/codemirror.css");
  require("codemirror/addon/lint/lint.js");
  require("codemirror/addon/lint/lint.css");
  require("codemirror/addon/lint/javascript-lint.js");
  require("codemirror/addon/hint/javascript-hint.js");
  require("codemirror/addon/display/placeholder.js");
}

export default {
  name: "Converter",
  components: {},
  data() {
    return {
      xmlEvents: "",
      jsonEvents: "",
      xmlEditor: null,
      jsonEditor: null,
    };
  },
  mounted() {
    // Make the XML textarea CodeMirror
    this.xmlEditor = CodeMirror.fromTextArea(this.$refs.xmlEvents, {
      mode: "application/xml",
      beautify: { initialBeautify: true, autoBeautify: true },
      lineNumbers: true,
      indentWithTabs: true,
      autofocus: true,
      tabSize: 2,
      gutters: ["CodeMirror-lint-markers"],
      lint: true,
      autoCloseBrackets: true,
      autoCloseTags: true,
      styleActiveLine: true,
      styleActiveSelected: true,
    });

    // Set the height for the XML CodeMirror
    this.xmlEditor.setSize(null, "75vh");

    // Make the JSON textarea CodeMirror
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.jsonEvents, {
      mode: "applicaton/ld+json",
      beautify: { initialBeautify: true, autoBeautify: true },
      lineNumbers: true,
      indentWithTabs: true,
      autofocus: true,
      tabSize: 2,
      gutters: ["CodeMirror-lint-markers"],
      autoCloseBrackets: true,
      autoCloseTags: true,
      styleActiveLine: true,
      styleActiveSelected: true,
    });

    // Set the height for the JSON CodeMirror
    this.jsonEditor.setSize(null, "75vh");

    // Add the border for all the CodeMirror textarea
    for (const s of document.getElementsByClassName("CodeMirror")) {
      s.style.border = "1px solid black";
    }
  },
};
</script>

<style>
textarea {
  height: 75vh;
  white-space: nowrap;
  resize: both;
  border: 1px solid black;
}

.cm-editor .cm-placeholder {
  color: red !important;
  text-align: center;
  line-height: 200px;
}

.CodeMirror-editor pre.CodeMirror-placeholder {
  color: red !important;
  text-align: center;
  line-height: 200px;
}

.CodeMirror-editor .CodeMirror-placeholder {
  color: red !important;
  text-align: center;
  line-height: 200px;
}
</style>

Answer 1

I tried the following and it worked for me in Vuejs:

.CodeMirror pre.CodeMirror-placeholder{
  color: #F1948A;
  text-align: center;
  line-height: 200px;
  font-family:arial;
  font-size: 1rem;
  font-weight:400
}

If anyone is still facing issue with styles in Vuejs check for the scoped keyword. That creates sometimes issue so check regarding it and add it if you want or remove it.

Answer 2

If possible Javascript can be used for this-

let placeholder_el = document.querySelectorAll('pre.CodeMirror-placeholder')[0];
placeholder_el.style['color'] = 'red';
placeholder_el.style['text-align'] =  'center';
placeholder_el.style['line-height'] =  '200px';

Answer 3

looking about CodeMirror i found this line using pseudo selector:

"&.cm-focused .cm-selectionBackground, ::selection": {
    backgroundColor: "#074"   },

on this link. so, i belive you can use in that way.

.CodeMirror .cm-s-default .cm-placeholder, ::placeholder{
  color:blue;
  text-align: center;
  line-height: 120px;
}

in css you just need use a pseudo selector element with ::

#inp::placeholder{
  color: lime;
  text-align: center;
}

<input id="inp" placeholder="placeholder" />

you can see more here css selectors

#NSL

Answer 4

Somehow I can't use your codesandbox without sigining in, but you can try to use pseudoclasses like so:

textarea::placeholder {
  color: red; 
}

Refer to this documentation.