Skip to content

Customize the cursor of clear button shown on non-empty search inputs#41577

Closed
DenisLopatin wants to merge 3 commits intotwbs:mainfrom
DenisLopatin:39114-add-cursor-pointer
Closed

Customize the cursor of clear button shown on non-empty search inputs#41577
DenisLopatin wants to merge 3 commits intotwbs:mainfrom
DenisLopatin:39114-add-cursor-pointer

Conversation

@DenisLopatin
Copy link

@DenisLopatin DenisLopatin commented Jun 28, 2025 •
edited by julien-deramond
Loading

This change adds the cursor: pointer style to the native ::-webkit-search-cancel-button pseudo-element to improve user experience on WebKit/Blink-based browsers.

Closes: #39114

Description

This change introduces a CSS rule to apply cursor: pointer to the native clear button (::-webkit-search-cancel-button) found in <input type="search"> elements. A comment has been added to clarify that this enhancement only affects WebKit/Blink-based browsers and does not apply to Firefox (Gecko).

Motivation & Context

Currently, the native clear button in search inputs lacks a pointer cursor, which can make it feel less interactive than other clickable elements on a page. This change improves user experience by providing standard visual feedback that the element is clickable, aligning its behavior with that of other buttons and links. This resolves the issue described in #39114.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

None.

@DenisLopatin DenisLopatin requested a review from a team as a code owner June 28, 2025 21:24
julien-deramond
julien-deramond approved these changes Jun 30, 2025
View reviewed changes
Copy link
Member

@julien-deramond julien-deramond left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the feature request and its implementation in this PR, @DenisLopatin.

Personally, I’m fine with the change as it improves rendering in Chrome (and likely other browsers supporting this selector).

Screenshot 2025-06-30 at 20 30 14

For other reviewers: I’m never quite sure where the line is between adding something to _reboot.scss versus placing it directly in the relevant component(s). In this case, I’m still a bit uncertain.

Also, for reviewers, please double-check whether this rule should be wrapped in $enable-button-pointers. As I understand it, that setting mainly applies to "real" buttons.

@julien-deramond julien-deramond requested a review from mdo June 30, 2025 18:30
@julien-deramond julien-deramond changed the title feat(forms): Add cursor pointer for search cancel button Customize the cursor of clear button shown on non-empty search inputs Jun 30, 2025
@DenisLopatin
Copy link
Author

DenisLopatin commented Jun 30, 2025

Hi! Yes, we can wrap this in the $enable-button-pointers condition:

@if $enable-button-pointers {
    &[type="search"]::-webkit-search-cancel-button {
      cursor: pointer;
    }
  }

In that case, the cursor for the form's clear button will also be disabled, but the problem is that this variable is intended only for buttons, and the ::-webkit-search-cancel-button pseudo-element isn't really a button. Personally, I think this would introduce some confusion into the code.

Maybe:

$enable-button-pointers: true !default;
$enable-search-clear-pointers: true !default;

....

@if $enable-search-clear-pointers {
    &[type="search"]::-webkit-search-cancel-button {
      cursor: pointer;
    }
  }

This is work too

@julien-deramond
Copy link
Member

julien-deramond commented Jun 30, 2025

Apologies, I edited the final sentence in my previous message; it was intended for the core team as well. 🙏
That said, I agree with you :) : it's my understanding that using $enable-button-pointers isn’t appropriate in this case. I'm also not in favor of adding $enable-search-clear-pointers, as this fine-tuning setting doesn't seem necessary.

@mdo
Copy link
Member

mdo commented Jul 6, 2025

In this case, I think we want to move it to Reboot if we want it—it's a change to browser defaults that's not unique to our other design changes and stuff. Thoughts?

@julien-deramond
Copy link
Member

julien-deramond commented Jul 7, 2025

In this case, I think we want to move it to Reboot if we want it—it's a change to browser defaults that's not unique to our other design changes and stuff. Thoughts?

No problem on my end. We can move it to Reboot as it's not specific to Bootstrap.

@julien-deramond julien-deramond mentioned this pull request Jul 22, 2025
Closed
@DenisLopatin
Copy link
Author

DenisLopatin commented Aug 19, 2025

Hi! To switch to reboot mode, is it to do what I suggested in the post above? Optional activation?

DenisLopatin and others added 2 commits August 20, 2025 02:19
@DenisLopatin
feat(forms): Add cursor pointer for search cancel button
6ee9836 
This change adds the `cursor: pointer` style to the native
`::-webkit-search-cancel-button` pseudo-element to improve user
experience on WebKit/Blink-based browsers.

Closes: twbs#39114
@julien-deramond @DenisLopatin
One line selector
158407c
@DenisLopatin DenisLopatin force-pushed the 39114-add-cursor-pointer branch from d8cac6e to 158407c Compare August 20, 2025 00:33
@DenisLopatin
Moves the pointer display to reboot
f2189d6 
- create variable $enable-search-clear-pointer as false default
- move cursor: pointer to _reboot.scss

Closes: twbs#39114
@mdo
Copy link
Member

mdo commented Aug 20, 2025

See #41639.

@mdo mdo closed this Aug 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@julien-deramond julien-deramond julien-deramond approved these changes

@mdo mdo Awaiting requested review from mdo

Assignees

No one assigned

Labels

css enhancement

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add cursor-pointer rule for search clear

3 participants

@DenisLopatin @julien-deramond @mdo