Users are able to customize the login page theme by choosing any background color, image, or both. The username and password inputs have transparent backgrounds to allow the chosen page background to show through. However, one customer reported that when they selected #867d7d as the background color, the cursor (or carat) became invisible when focused on the input fields. The cursor is actually blinking as usual, but due to its color being so similar to the background color, it cannot be seen.
Is there a solution to make the cursor visible in this particular scenario?
Update: This issue is only present in Internet Explorer; Chrome and Firefox display the cursor correctly.
For a live demonstration, check out this JSFiddle.
<style>
body { background-color: #867d7d; }
input { color: white; background-color: transparent; width: 100%; }
</style>
<input placeholder="The caret is nearly invisible in IE">