How can I change the style of the text cursor?

Authoring Inform 7
1

I’m building a project with Inform7 and must have it displayed as playable within a web browser for reasons related to my game.

I’d like to change the caret (text cursor) to be more visible (wider), similar to this page, but I’m not finding any way to accomplish this with straight CSS.

Has anyone done this with an Inform project or is it possible?

2

You can modify the look of a cursor with the cursor CSS property.

Specifically, if you want to make it bigger, you can just replace it with a larger custom cursor, like so:

/* standard cursor value as fallback for url() must be provided (doesn't work without) */ .baz { cursor: url(hyper.cur), auto; }
Where hyper.cur is a link to an image file of your desired cursor.

Mind you, no idea if that’ll work in Inform.

3

That’s only for mouse cursors, not the text input cursor.

That webpage handles it by manually adding and removing a space, presumably using setInterval().

4

Ah, my apologies, I misread. I think changing the caret is impossible with CSS, unless the caret has a CSS wrapper around it …

5

You can certainly get that effect on the web interpreter, but you’ll have to make it yourself with JavaScript. It’s not a simple task but it’s common enough effect that you can get 90% there by googling for code and libraries (“javascript blinking cursor effect” shows some promising results.)

6

This is the best example I could find, since it’s a recent article and there’s a decent breakdown with a Codepen. Although, I don’t see how this (or others really) would be feasible without the ability to match the existing space structure of their examples. For example, the current input box is within an field field wrapped in a single span. This particular example requires and addition span to apply the actual styles to. How can I add this without altering the existing JS the interpreter is using to generate the terminal?