CODEWITHSUNDEEP
htmlcsswebviewelectron
Matt Bierner
Matt Bierner

Reputation: 65263

Change webview find on page result style using css?

In an Electron webview using findInPage, can you use css to change the result colors?

enter image description here

In the above image, the current find result is highlighted in orange while additional results are highlighted with yellow. I'd like to tweak the styling of both of these

Upvotes: 11

Views: 851

Answers (2)

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

body{
background-color:#000;
color:#fff;
}
h2::-moz-selection { /*Firefox*/
    color: #000;
    background: #FF9800;
}
::-moz-selection { /*Firefox */
    color: #000;
    background: yellow;
}
h2::selection {
    color: #000;
    background: #FF9800;
}
::selection {
       color: #000;
    background: yellow;
}
<h2>Select some text on this page:</h2>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>

Upvotes: 3

Rachel Gallen
Rachel Gallen

Reputation: 28563

In Electron you can use stopfindInPage to stop the find and focus/activate a selection (activateSelection - Focus and click the selection node). As it is also possible to insert css, this may allow you to insert css to update the color/ bg=color of the selected text, by using something like the following :

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

I haven't tried it, it's just a suggestion from looking at the API. There is an interesting article on css tricks that you may also find useful

Hope this helps, and that you find a solution

EDIT:

If you are on mac you could use setUserDefault in the system preferences.

In addition, if you use Nathan Buchar's electron settings, you can use the set method to adjust key values (in mac/windows/linux - see his faq)

Upvotes: 0

Related Questions