How to centre allign placeholder in CodeMirror and change its font color?

v6
1

@marijn

I am using the CodeMirror plugin 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. Can someone please suggest me how to change the font-color and center align the placeholder for the textarea controlled by the CodeMirror?

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

I tried:

.CodeMirror-placeholder {
  color: red !important;
}

.cm-placeholder {
  color: red !important;
}

.cm-editor .cm-placeholder {
  color: red !important;
}

.CodeMirror-editor .CodeMirror-placeholder {
  color: red !important;
}

None of the above codes are working for me. @marijn could you please provide some suggestion how can I fix placeholder issue?

2

This should work. Try again, maybe?

3

@marijn Thanks a lot for your response. I tried your suggestion in my Vuejs application, but it is not working. I tried the following:

.cm-editor .cm-placeholder {
  color: red !important;
}
4

@marijn I have created a sample project based on my real application to demonstrate the issue in CodeSandBox: cocky-matan-kvqnu - CodeSandbox

@marijn If you get a chance, can you please have a look and let me know what I’m missing here or do I need to follow something different for the Vuejs application? Thanks a lot in advance.

5

You’re using version 5, not 6. There the selectors are different. Browser devtools are a good way to figure out selectors and which rules apply to a given element.

6

@marijn I looked into it and based on it, I tried a couple of things, but still no result. I tried to add the following things to make it work:

.CodeMirror-editor .CodeMirror-placeholder {
  color: red !important;
}

.CodeMirror::-webkit-input-placeholder {
  color: #f1948a;
  text-align: center;
}

.CodeMirror::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}

.CodeMirror .cm-s-default .CodeMirror-empty{
  color:blue
}

Just wanted to confirm if I am missing something as nothing seems to work fine. I tried to update the devtools directly for the element .CodeMirror .cm-s-default .CodeMirror-empty will change event the color for the text which will appear not just for placeholder. @marijn Please suggest some work-arounds.

7

There is no CodeMirror-editor class anywhere in the DOM. You’ll want to use the devtools inspector to see the DOM structure, you should be able to figure it out from there.