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 the fill 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.
    0_1512427485070_8487de4a-b4c2-4683-b197-942e7dcb7941-image.png



  • @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
    

Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.