Use a magnifying glass instead of a text "Go" for the search button #12590
Conversation
|
I would just give some a little more left-padding to the text input cheers |
additionally: - Change placeholder text from "Search" to "Search...", which seems more common - CSS changes: Use a fixed height to make sure search field and button have the same hight. Also reduce button width a little because the icon needs less space.
|
Whoops. Yes, the padding got lost. Fixed: |
|
Not sure if it's me but... could you vertically center the glass? |
Yeh actually I see that now also 😅 |
|
The text is centered. If I double the height, I get
I believe this is an effect how the font renders the glyph: On another system (windows), I get: While one could add padding to shift it for a specific font, that might make it worse for other font. I believe one has to live with this. Or do you have an idea? Edit: I believe we don't want to add fontawesome or some web fonts. One solution might be to embed a svg icon (e.g. https://uxwing.com/search-icon/) but I'm not a HTML expert, so not sure if/how that works. |
|
I don't believe it is feasible to add an SVG icon to the submit button as is. I therefore propose to close because we cannot guarantee reasonable positioning with unicode glyphs. An alternative route would be an adaption of https://pagedart.com/blog/how-to-add-a-search-bar-in-html/, which for example could be styled like this:
Or, how Furo, where the looking glass is only decoration and you don't have any button (submit only by enter) The downside is that this uses other html elements and styling (border runs around the complete form not only the input box, the looking glass is actually the button). Thus customization of downstream themes would be broken. - Likely their CSS just does not have any effect and they would get the default styling we provide. Would that be acceptable? |
|
This is not a release blocker. |
|
Moving to draft until a decision is reached on #12590 (comment) |
additionally:
Preview:
