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

[DenisLopatin]

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

• https://deploy-preview-41577--twbs-bootstrap.netlify.app/docs/5.3/components/navbar/#supported-content

Related issues

None.

[julien-deramond]

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).

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.

[DenisLopatin]

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]

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]

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]

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.