Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set cursor: pointer for interactive elements #24954

Closed
printercu opened this issue Dec 6, 2017 · 2 comments
Closed

Set cursor: pointer for interactive elements #24954

printercu opened this issue Dec 6, 2017 · 2 comments
Assignees
Projects

Comments

@printercu
Copy link

In #21812 @mdo provided links which says that pointer cursor should be used only for links.

Both Microsoft's design guidelines and Apple's HIG are related to desktop applications. While W3C spec is related to web, it does not follow it's recommendation: all provided sources use cursor pointer for buttons on their web pages, some of them for checkboxes (ex.: Apple, Microsoft, W3C).

There are some issues with having cursor: pointer for links but not for buttons.

  1. It's usual to have controls in forms like this:
<button class='btn btn-primary' type='submit'>Save</button>
<a class='btn btn-secondary' href='/back'>Cancel</a>

This way both controls looks the same, but have different cursors. This looks inconsistent.

  1. .navbar-toggler is good example when it's not clear if element is interactive or not: https://getbootstrap.com/docs/4.0/components/navbar/#external-content

Why desktop application design guides should not be used for web pages?

The main difference is that web-page contains mostly static content (not-interactive) but desktop app usually almost totally interactive (this should be considered in global scale, not for single web-site that can be fully interactive: users use browser to visit different web-sites). So it has become usual to use pointer cursor to help users distinguish interactive elements on webpages. Especially with custom-styled inputs.

Please consider to set back pointer cursor for interactive elements.

@Herst
Copy link
Contributor

Herst commented Dec 7, 2017

Somewhat related discussion in #24156.

@Gredys
Copy link

Gredys commented Dec 18, 2017

I completely agree with the author. Interactive elements MUST have CURSOR on web pages. Otherwise, this will mislead users regarding the interactivity of the elements. Do not confuse desktop applications and web pages - these are completely different things.

@mdo mdo added the has-pr label Dec 27, 2017
@mdo mdo added this to Inbox in v4 Beta 3 via automation Dec 27, 2017
v4 Beta 3 automation moved this from Inbox to Shipped Dec 28, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v4 Beta 3
  
Shipped
Development

No branches or pull requests

6 participants