Less contrast of text cursor over dark input box

Question

We all know dark UI looks damn sexy. The problem is that, when the pointer hovers over a dark input box, the default black cursor has low contrast. Since this could confuse users, what might be the remedies?

• Note: I am using Safari in Yosemite.*c

Answer 1

If the color of the text is white, the cursor must be so.. It is kind of a weird behavior i can't reproduce. Anyway, one easy thing you can do is to work on the css style: define :focus and :hover statuses where background color turns white in the dark input, or you can also set a white border to indicate where the focus is. Make sure you provide enough contrast, and test it with color contrast tools if you are making accessible content.

Answer 2

It's a given, that if your Background is Dark, everything you need to focus on should be Light.

This will need you to dive more into CSS and change what happens when you focus on the particular InputBox.

Answer 3

As far as I understand, you're saying there is a technical limitation that causes the contrast to be bad on dark bg text fields. Then no, because you have control on this color.

The cursor and the text color are tied together and controlled by the css property color

input {
    color: red;
}

As for the placeholder text, its color is customizable also

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

The mouse pointer, if this was the matter, can be styled using

.custom {
   cursor: url(images/my-cursor.png), auto;
}

although this is a quite bad idea.