WordPress.org
Get WordPress

Make WordPress Core

Opened 3 months ago

Closed 6 weeks ago

#64382 closed defect (bug) (fixed)

Post search input “close” (×) button should use cursor: pointer

Reported by: sumitsingh's profile sumitsingh Owned by: joedolson's profile joedolson
Milestone: 7.0 Priority: normal
Severity: normal Version: 6.9
Component: Posts, Post Types Keywords: has-screenshots has-patch commit
Focuses: ui, accessibility, css, administration Cc:

Description

When using the Posts screen search feature in WP Admin (/wp-admin/edit.php), the close (×) button inside the search input field does not show a pointer cursor on hover.
This makes it appear non-interactive even though it is clickable.

Steps to Reproduce

Go to Posts → All Posts in WP Admin.

Enter a search term (e.g., “uncategorized”).

Notice the × clear button appears in the search input.

Hover over the × icon.

Expected Behavior

The × clear button should display cursor: pointer;

This will indicate to users that the element is clickable.

Actual Behavior

The cursor remains default, not pointer.

This reduces clarity of the UI and affects accessibility & usability.

Suggested Fix

Add CSS to apply a pointer cursor on the clear button:

.wp-filter .search-input button.clear,
.search-box input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}

Attachments (2)

image-12-09-2025_11_45_AM.png​ (137.2 KB) - added by sumitsingh 3 months ago.
Post search input “close” (×) button should use cursor: pointer
64382-pointer-cursor.patch​ (525 bytes) - added by manhphucofficial 3 months ago.
Adds cursor: pointer to the search clear (×) button in the Posts list screen. This improves usability and accessibility by indicating that the element is clickable.

Download all attachments as: .zip

Change History (13)

@sumitsingh
3 months ago

Post search input “close” (×) button should use cursor: pointer

@manhphucofficial
3 months ago

Adds cursor: pointer to the search clear (×) button in the Posts list screen. This improves usability and accessibility by indicating that the element is clickable.

#1 @manhphucofficial
3 months ago

Hi @sumitsingh,

Thanks for the report!

I’ve attached a patch that adds cursor: pointer to the search input clear (×) button
in the Posts list screen. This ensures the UI properly indicates that the element
is clickable, improving usability and accessibility.

Tested on:

  • Chrome
  • Safari
  • Firefox

The clear button now behaves as expected and shows the pointer cursor on hover.
Please let me know if you'd like any refinements.

Thanks!

This ticket was mentioned in ​PR #10615 on ​WordPress/wordpress-develop by ​@manhphucofficial.
3 months ago #2

  • Keywords has-patch added

This PR addresses ticket #64382 in WordPress Trac.

The issue:
When using the search input in the Posts list screen (/wp-admin/edit.php),
the search clear (×) button does not display a cursor: pointer on hover,
making it appear non-interactive even though it is clickable.

The fix:
Adds cursor: pointer to the WebKit search input clear button pseudo-element.

Testing:

  • Verified on Chrome, Safari, and Firefox.
  • Hover state now correctly shows a pointer cursor.
  • No regressions observed.

Trac ticket: https://core.trac.wordpress.org/ticket/64382

Note:
Per WordPress Core guidelines, this PR is provided for code review only.
All discussion and final commit should happen in the Trac ticket.

This ticket was mentioned in ​Slack in #accessibility by joedolson. ​View the logs.
3 months ago

#4 @joedolson
3 months ago

  • Milestone changed from Awaiting Review to 7.0

This seems fine to add. There is a long debate about the usage of the pointer cursor in #47171 that's worth reading for some history on this, but for consistency, this makes sense.

I am curious about the test results that mention testing on Firefox - as far as I know, Firefox doesn't render a clear button in search forms on either Windows or Mac; what exactly do those tests cover?

#5 @joedolson
3 months ago

  • Owner set to joedolson
  • Status changed from new to accepted

#6 @manhphucofficial
3 months ago

Thanks for the clarification, @joedolson!

To clarify the testing notes:

  • Chrome & Safari: tested the native clear (×) button and verified the pointer cursor works as expected.
  • Firefox: since Firefox does not render a native clear button for <input type="search">, there was no hover behavior to test. I only confirmed that the added CSS does not introduce any visual or functional regressions in Firefox.

I'll update the testing notes to reflect this more accurately.

Thanks again for reviewing!

​@dhruvang21 commented on ​PR #10615:
3 months ago #7

@manhphuc Tested on wordpress playground. it's working fine

#8 @sabernhardt
2 months ago

I recommend removing .search-box to make the selector input[type="search"]::-webkit-search-cancel-button. If the WebKit cancel button should have the pointer cursor in the Core search box, it should have the same for any other search input that might be on the page.

Also, .wp-filter .search-input button.clear seems unnecessary. I could not find any element with the search-input class (or a button with the clear class).

This ticket was mentioned in ​Slack in #accessibility by joedolson. ​View the logs.
8 weeks ago

#10 @joedolson
8 weeks ago

  • Keywords commit added

Looks like @sabernhardt's concerns have been resolved; this looks good to me. It's very straightforward, and I'm marking it for commit.

#11 @joedolson
6 weeks ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 61514:

A11y: Use pointer cursor on webkit field cancellation buttons.

Webkit-based browsers add a cancel button to search inputs. This input uses the default cursor standard to buttons and inputs, but the WordPress admin applies the pointer cursor to buttons and inputs. Apply the WordPress standard pointer to this pseudoelement for UI consistency.

Props sumitsingh, manhphucofficial, joedolson, sabernhardt, dhruvang21.
Fixes #64382.

Note: See TracTickets for help on using tickets.