删除的默认光标图标是什么?

时间:2015-12-03 20:02:21

标签: html css

在构建应用程序的过程中,我正在进行设置,因此当您按住控制键并单击复选框时,它将更改为删除(x)而不是添加(✓)。

我可以在keydown发生时为我的元素添加一个类,并在keyup发生时将其删除。我也有它在点击工作,但我遇到的问题是我想显示删除/删除光标。

我知道我们有很多东西的默认图标,包括添加内容,但我似乎无法找到删除/删除的内容。有没有人有一个有效的显示删除方法,而不是建立自己的图标?我想避免这种情况,因为每个浏览器/操作系统都有不同的图标。到目前为止,除了创建我自己的图标外,似乎无跌落可能是我最接近的选择?

有没有我缺少的东西,希望有人有更好的方法来处理这个比使用chrome / IE / FF / safari更好的方法吗?

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

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

5 个答案:

答案 0 :(得分:12)

没有一个,但您可以创建自己的图标并使用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>

答案 1 :(得分:5)

not-allowed是唯一有意义的,但自定义jpg url选项看起来很简单。

你也可以重新考虑你的UI设计来解决这个问题。你可以坚持使用复选框的直观默认行为,并让用户点击它,同时理解复选标记将切换。没有花哨的控制键,没有花哨的游标。在任何一种情况下,也许只是指针图标。使用一些单独的添加/删除操作按钮。

您还可以考虑显示一些可添加/删除的可点击图标(如果适用,则为每个项目)。因此,不使用复选框。

答案 2 :(得分:3)

有多种方法可以获得预期的结果。

然而,这不是默认选项,使用$sql="select s.supplierid, s.name, s.address, s.zipcode, s.cityname, s.region, s.country, s.phone, s.fax, s.contactmame, s.contacttitle, s.contactphone, s.contactemail, s.notes, s.employeeid, e.employeeid as 'emp_id', e.name as 'emp_name' from suppliers s left join employees e on s.employeeid=e.employeeid where s.supplierid=? order by s.name desc limit {$from_record_num}, {$records_per_page}"; 显示自定义图片应该可以正常工作。

否则使用其中一个默认属性,其中cursor: url()可能是最佳选项。 More about cursor properties

默认游标:

not-allowed
Source

答案 3 :(得分:2)

Here is a list of cursor properties

cursor: not-allowed似乎是唯一类似于&#34;已删除&#34;属性。 Example

您还可以使用url属性插入自己的自定义图像。

答案 4 :(得分:0)

我建议使用def add_category(request): form = CategoryForm() #HTTP Post? (that is, did user supply data?) if request.method == 'POST': form = CategoryForm(request.POST) if form.is_valid(): form.save(commit=True) # could also give confirmation message if you wanted return index(request) else: print(form.errors) return render(request, 'rango/add_category.html', {'form': form}) # new template created hereno-drop no-drop