Olivero: Remove underline and the cross in searchbox

Will provide the patch in a while

Attaching the patch for the fix

Testing the patch

Reviewing the patch

I have tried reproducing and fixing the issue with patch #3. Tested and verified the patch on Drupal 10.1.x-dev. The patch was applied successfully without throwing any errors and fixed the issue for all the devices. I am attaching a screenshot for reference, showing the state before and after applying the patch.

I believe these have been there for a long time so not sure there's a problem. I know that at least the delete cross is there intentionally. Tagging for subsystem maintainer review to get clarification from the maintainers of Olivero.

Can you please provide figma link for Drupal designs ?

Can you please provide figma link for Drupal designs ?

@aayushDrupal sharing figma link for your reference, please have a look.
https://www.figma.com/file/x5zBLbvoW1jsvyAOt4Gp9I/Olivero-Theme---Public....

Thanks!

As per figma design patch is working.

So my understanding is there were design changes made before launch and believe this is one of them.

Based on #8 the X was intentional and image the underline too.

Believe this can be closed works as designed. Anyone disagree?

I'm honestly not sure the "X" mark is intentional, but if it's not, I think a better path would be to move to using input[type="text"] over input[type="search"]. They're almost functionally identical with only a couple of key differences. This would certainly be an easier fix than the soup of browser prefixes added in patch #3:

/* removing cross for the mobile */

.block-search-narrow [type="search"]::-webkit-search-cancel-button,
.block-search-narrow [type="search"]::-webkit-search-clear-button {
  display: none;
}

.block-search-narrow [type="search"]::-moz-search-clear-button {
  display: none;
}

.block-search-narrow [type="search"]::-ms-clear {
  display: none;
}

If we were to change this from a search input to a text input, we'd just need to make sure that we mimic the search type's accessibility values, namely, changing the role of the input to "searchbox" to match the search input's implicit aria-role value