Member Avatar for provster

Hey there, I have an annoying problem! I hope someone else has experienced the same.

I am basically trying to style a text box, and make it a bit more dynamic. However, on windows machines (in FF, CH & IE), I am finding that the mouse cursor disappears when I hover over the box. It's as if the text box is layered above the mouse cursor.

Does anyone know how to fix this?

I have stripped down my HTML and CSS and I have found that it seems to happen just with the background colour change. See here:

Strangely this effect only happens on windows. On Mac OS X, it seems just fine. Halp please :)

<html>
<head>
<style type=text/css>

input.textBox {
    background-color: #7e7e7e;
}

</style>
</head>
<body>
	<form method="post"> 
	<input class="textBox" type="text"/>
	<input type="submit"  value="Submit" />
	</form>
</body>
</html>
  • 3 Contributors
  • 2 Replies
  • 690 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by johnsteve.bravo

Dani AI

Generated

Quick clarification first: there are two different “cursors” people mean — the mouse pointer (arrow) and the text insertion caret (the blinking vertical bar). In this case the behaviour you describe (appears only when the input’s background is changed) is almost always the insertion caret becoming hard to see against the field background. A robust fix is to explicitly set the caret color in CSS rather than relying on browser defaults. (developer.mozilla.org)

Practical fix (CSS example). Force a visible text color and caret color that contrast with your background:

input.textBox {
  background: #222;      /* example dark background */
  color: #ffffff;        /* text color — caret falls back to this in older browsers */
  caret-color: #ffffff;  /* explicit insertion-caret color for modern browsers */
}

Setting color gives a compatible fallback (many engines use the text color for the caret), while caret-color lets modern browsers draw a guaranteed contrasting caret. (developer.mozilla.org)

Accessibility note and extra troubleshooting. Always pick colors that meet WCAG contrast guidelines (normal text >= 4.5:1) so the caret, placeholder and typed text remain readable. If the problem still appears only on Windows in some browsers, check OS/browser pointer settings (e.g., “Hide pointer while typing”) and try toggling hardware acceleration — both have been reported to affect cursor rendering. If disabling hardware acceleration fixes it, report it to the browser vendor because it’s often a GPU/drivers or browser-rendering bug. (w3.org)

This builds on and ’s contrast observations but offers a modern, targeted solution (caret-color + fallback) and a short troubleshooting order: (1) CSS caret + color, (2) confirm WCAG contrast, (3) test with hardware acceleration off / check Windows pointer settings. If needed, include browser/OS and a minimal repro when filing a bug. (developer.mozilla.org)

Recommended Answers

All 2 Replies

Member Avatar for shaya4207

Because the background color of the box is the same color as the cursor, and the reason it only happens on windows is, because Mac probably has a different cursor color...

commented: This is correct +1
Member Avatar for johnsteve.bravo

Whenever the text box's background color is similar or almost similar to that of the cursor, the cursor starts seeming to be disappeared. You can simply change background color to solve this issue. Additionally, you can try changing the font color as well.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.