0

I am capturing screenshots of webpages using the puppeteer node module.

Some pages have an input field that automatically gets the focus.

I would like the blinking cursor to not appear on the screenshot. Is there an option to do so?

Steren
  • 7,311
  • 3
  • 31
  • 51

1 Answers1

1

You can implement this answer in puppeteer using addStyleTag:

const styleContent = `
  input {
    color: transparent;
    text-shadow: 0 0 0 black;
  }
  input:focus {
    outline: none;
  }
`;

await page.addStyleTag({ content: styleContent });
Everettss
  • 15,475
  • 9
  • 72
  • 98
  • 2
    In my case I needed the text color to stay the same. So instead I used this css: ```css * { caret-color: transparent !important; } ``` From https://stackoverflow.com/a/48389261/1408516 – Chris Mohr Jul 20 '18 at 20:50
  • one thing that's obvious, but I was missing at first, make SURE you use `await page.addStyleTag({ content: styleContent });` AFTER you load the page with `await page.goto`. because of course, the page needs to be loaded, in order to add styles to it! :P – Jared Oct 16 '18 at 23:35
  • You can also use `caret-color: transparent !important;`. – JW. Oct 19 '18 at 19:40