1

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

Illustration of a dark UI with dark input boxes

  • Doesn't your black cursor have a white outline? – Ken Mohnkern Oct 12 '15 at 14:14
  • @KenMohnkern Oh i don't have, btw I am using safari in macbook – Jivan Oct 12 '15 at 17:22
  • 1
    Oh, I understand now! You're talking about the text cursor, which lacks the white outline, so it's invisible against dark backgrounds. (I was thinking of the arrow cursor.) – Ken Mohnkern Oct 12 '15 at 19:54
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.

0

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.

0

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.

  • As this is a UX site and not really a dev focused one, can you expand on your comment about why it is a bad idea to change the pointer / cursor colour? It's useful to know that it is possible, but we're not really focused on actual code on this site. It's more the theory and reasoning behind why to do / not do something, rather than how it's implemented. – JonW Nov 12 '15 at 14:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.