What is the default cursor icon to delete?

Question

In the process of creating the application, I configured it, so when you hold down the "Control" key and click on the flag, it changes to "delete" (x), and not to "add" (✓).

I can add a class to my element when keydown happens and delete it when keyup happens. It also works for me on click, however the problem that I am facing is that I want to show the delete / delete cursor.

I know that we have default icons for many things, including adding anything, but I can not find anything to delete / delete. Does anyone have a valid deletion display method other than creating their own badge? I would like to avoid this, as each browser / OS has different icons. Thus, in addition to creating my own icon, it seems that my choice is “without drops”?

Is there something that I am missing, I hope someone has a better way to handle this than me, which would work with chrome / IE / FF / safari?

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

.add-item { cursor: copy; }
.remove-item { cursor: ????; }

Answer 1

, cursor: url(); CSS .

: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property

:

div {
  cursor: url("https://i.stack.imgur.com/bUGV0.png"), auto;
}

<div>Hover Here</div>

Hide result

Answer 2

not-allowed , , jpg url .

, . , , . , . , . / .

, / ( , ). , .

Answer 3

.

, cursor: url() , .

, not-allowed, , .

:

<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:grab">grab</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
<span style="cursor:not-allowed">not-allowed</span><br>
<span style="cursor:no-drop">no-drop</span><br>

Hide result

Answer 4

Here is a list of cursor properties .

cursor: not-allowedseems to be the only one resembling the "deleted" property. An example .

You can also use the property urlto insert your own image.

Answer 5

I suggest no-drop or not-allowed .