Search Bar Modification
-
Good morning all,
Inside the Search Bar, when you hover over the Magnifying Glass or the Down Arrow, it displays a box border around the icon - really cool effect and looks nice. The only other element in the Search Bar (when you have text typed in) is the X icon (to remove your text).Can the same effect be applied to the X button as well ? Right now, he is lonely, boxless and sad.
I am still learning all the DevTools and Inspect options (saw a post today w/command line switches - really in depth). When using it, I couldn't find anything related to that specific button.
-
@vongalin I don't use the search bar very often, but this may be related: https://forum.vivaldi.net/topic/21360/the-name-for-blue-x-button/10
I believe this is the selector for the search field:
#main > div.toolbar-addressbar.search.toolbar > div.iconmenu-container.searchfield > input
-
@lonm - thank you for the reply. I tried a variety of settings; however, was unsuccessful in doing any type of modification to the X button/icon.
-
@vongalin That's a pity. Unfortunately, the method used by the engine to draw this is not standard, so it is a little tricky and requires a bit of hacking to make it work, as you need to use an image. I've tried this code, and it seems to work. Note however that I have no idea how to make an inline defined svg change stroke colour to match the theme, so the X will always be grey.
#main > div.toolbar-addressbar.search.toolbar > div.iconmenu-container.searchfield > input::-webkit-search-cancel-button { -webkit-appearance: none; border: 1px solid var(--colorHighlightBg) !important; border-radius: var(--radius); font-size: 16px; display: block; height: 16px; width: 16px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBzdHJva2U9IiM4ODgiIGQ9Ik0xMy41IDZsLTEuNC0xLjQtMy4xIDMtMy4xLTNMNC41IDZsMy4xIDMuMS0zIDIuOSAxLjUgMS40TDkgMTAuNWwyLjkgMi45IDEuNS0xLjQtMy0yLjkiPjwvcGF0aD4KPC9zdmc+"); background-size: contain; }
The background image is this:
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"> <path stroke="#888" d="M13.5 6l-1.4-1.4-3.1 3-3.1-3L4.5 6l3.1 3.1-3 2.9 1.5 1.4L9 10.5l2.9 2.9 1.5-1.4-3-2.9"></path> </svg>
encoded into base64 here
Does that work?
-
@lonm - OUTSTANDING ! This worked perfectly and looks really good in my setup. Thank you for taking the time to do this and help out.
-
@lonm Hmm, you could probably target the path with css and just input it anew, thereby giving the stroke the theme color.
-
@luetage The problem is the svg is being set as a
background-image
, and I don't think that using thefill
rule will affect it. -
@lonm Oh.... then javascript would be needed to change the svg attribute, and then input this path. Probably not worth it.
-
Oh it's not only in address search bar, but in all search fields: panel, bookmarks etc.
-
@retoree You could correct it by changing the text in the original post
#main > div.toolbar-addressbar.search.toolbar > div.iconmenu-container.searchfield > input::-webkit-search-cancel-button
to
input::-webkit-search-cancel-button
-