textarea placeholder color is hardcoded

[ntward]

The fallback textarea placeholder color is hardcoded in the CSS. This means that it doesn't automatically blend in with an existing site, necessitating additional CSS to override.

The placeholder color CSS rule can be removed.
The placeholder then becomes transparent, but that can be mitigated by adding ':not(:placeholder-shown)' to the rule that makes the textarea contents transparent:

code-input textarea:not([data-code-input-fallback]):not(:placeholder-shown){color:transparent;background:0 0;caret-color:inherit!important}

P.S. Great work

[WebCoder49]

Thanks for this, @ntward! I will commit this with you as an author and it should be released soon.

[WebCoder49]

[Edit: deleted unnecessarily wordy response; see edit history if you want]

[WebCoder49]

[Edit: deleted unnecessarily wordy response; see edit history if you want]

[WebCoder49]

[Edit: deleted unnecessarily wordy response; see edit history if you want]

[WebCoder49]

[Edit: deleted unnecessarily wordy response; see edit history if you want]

[WebCoder49]

@ntward Sorry for the delay; I slightly deprioritised this because you had found a CSS workaround.

You will likely have to change your CSS rule similarly to this; is it too difficult for your situation?:

-textarea {
+textarea, code-input {
    color: navy;
    background: yellow;
    caret-color: red;
}

(this is required in my current patch)

Reasoning:

• This works consistently with more styles and functionality, e.g. shadows and resizing, which won't work on the textarea element inside a code-input.
• In version 2.x.x of code-input.js, the public interface's design has been best suited to and documented as thinking of code-input elements as similar to textareas and ignoring that a real textarea exists inside the code-input. This makes CSS styling work as expected in more situations, and resizing etc. must currently be applied to code-input rather than textarea elements for technical reasons; right now most CSS and all JavaScript for interacting with textarea elements works exactly the same, substituting the textarea for a code-input element (not its textarea element). However, I understand it feels illogical many and has caused some bad design and increase in size of the library; hence it may be changed in v3.x.x, since such a change certainly requires breaking changes.

[WebCoder49]

@ntward I'm going to close the issue and release this change mentioned above since it's generally useful including for my use¹; please do reopen the issue and let me know if your problem is still not addressed enough in your opinion.

Footnotes

1. https://codeberg.org/teclat/teclat-web, if you're curious ↩

[WebCoder49]

When testing I have noticed only now that this causes a lot more CPU usage, due to constantly polling for the highlighted text colour. I'll look for a better way to do it...

[WebCoder49]

I currently assume you are fine with keeping using your "additional CSS to override" workaround (e.g. !important) until I complete the contrast code, checking properly for breaking changes, etc., and implement the CSS colour in a compatible way. Unfortunately that has taken a while.

@ntward, Please do let me know if you need this fixed more quickly, so I can prioritise you.