CODEWITHSUNDEEP
htmlcssmouse-cursor
chaosink
chaosink

Reputation: 1483

Color of CSS crosshair cursor

When the bg_color is 7F7F7F, the color of the crosshair cursor will be FFFFFF-7F7F7F=808080 which is invisible in the background.

Tested in Chrome and Edge.

Another question showed the same issue: Crosshair cursor becoming translucent

I see the definition of the crosshair cursor in the CSS standards: https://drafts.csswg.org/css-ui-3/#valdef-cursor-crosshair

But I see no definition of the color.

Maybe it's better to use (bg_color+128)%256?

div {
cursor: crosshair;
height: 90px;
width: 360px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
<div style="background-color: #7F7F7F;">Cursor is invisible on this area.</div>
<div style="background-color: #FF0000;">Cursor is visible on this area.</div>

Upvotes: 1

Views: 1475

Answers (1)

Anton
Anton

Reputation: 8508

You can create a custom cursor with contrast color for both divs.

The cursor property is specified as zero or more <url> values, separated by commas, followed by a single mandatory keyword value. Each <url> should point to an image file. The browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified). MDN documentation

Custom crosshair

cursor: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none'
 xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2444 11.3203H22.8718M11.5581 0.006558V22.634'
 stroke='%23C1EDCC' stroke-width='2'/%3E%3C/svg%3E")
 12.5 12.5,
 crosshair;



div {
  height: 90px;
  width: 360px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2444 11.3203H22.8718M11.5581 0.006558V22.634' stroke='%23C1EDCC' stroke-width='2'/%3E%3C/svg%3E")
      12.5 12.5,
    crosshair;
}
<div style="background-color: #7f7f7f">Cursor is invisible on this area.</div>
<div style="background-color: #ff0000">Cursor is visible on this area.</div>

Also you can customize cursors for each area (div) just by switching the color.

div {
  height: 90px;
  width: 360px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

div:nth-of-type(1) {
  cursor: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2444 11.3203H22.8718M11.5581 0.006558V22.634' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 12.5 12.5, crosshair;
}

div:nth-of-type(2) {
  cursor: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2444 11.3203H22.8718M11.5581 0.006558V22.634' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 12.5 12.5, crosshair;
}
<div style="background-color: #7f7f7f">Cursor is invisible on this area.</div>
<div style="background-color: #ff0000">Cursor is visible on this area.</div>

Upvotes: 2

Related Questions