Skip to content

Set cursor: pointer for interactive elements #24954

Closed

Description

@printercu

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.

Activity

  1. added
    cssSass sources or compiled CSS
    v4v4, the frozen docs on gh-pages
    on Dec 6, 2017
  2. Herst commented on Dec 7, 2017

    @Herst
    Contributor

    Somewhat related discussion in #24156.

  3. Gredys commented on Dec 18, 2017

    @Gredys

    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.

  4. added
    has-prAn open pull request addresses it
    on Dec 27, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

cssSass sources or compiled CSShas-prAn open pull request addresses itv4v4, the frozen docs on gh-pages

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions