Placeholder color is not correct

[hiep294]

I have an input that has a placeholder, the input's placeholder is grey. But when using toPng, in the image, the placeholder is black.

Expected Behavior

in the image, the placeholder should be grey

Current Behavior

in the image, the placeholder is black

Steps To Reproduce

link: https://codesandbox.io/s/thirsty-sunset-k7nk51?file=/src/App.tsx

1. style placeholder
2. click btn "to png" to export html to png
3. in output png, the placeholder is not styled

[vivcat[bot]]

👋 @hiep294

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[SUCHMOKUO]

Just have looked at the code and found some informations about this bug, so I put it here for anyone who wants to contribute :)

For now only the ::before and ::after are cloned when doing the screenshot, ideally we just need to clone the ::placeholder pseudo element also and then it should work, however, unfortunately we actually cannot get the styles of the ::placeholder pseudo element on every browser, even Chrome is still not supporting this (see this bug), so might need some other approach.

[thundernet8]

An alternative solution: set the value of empty inputs to match the placeholder and modify the input color style accordingly, for example, to 'gray'.

[vivcat[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.