Ctrl + F in html

Directly and reliably opening the browser’s own “Search in page” dialog (typically activated by Ctrl+F or Cmd+F) via an HTML button is generally not possible due to security restrictions and the lack of a standardized web API.

hail brave new AI world

New snippet
see in Action here: https://webers-testseite.de/impressum/

it is a draggable Window:

this is for child-theme functions.php:

see code here on paste bin: https://pastebin.com/zc4fvX1w

because of a innerHtml (lines 158-176) it is not possible to post it here – (maybe mod knows how)

and here is the style for quick css

/* --- Draggable Search Window --- */
#gcmSearchUIContainer { /* Changed ID for clarity */
  position: fixed;
  top: 100px; /* Initial position from the top */
  left: 50%;  /* Start horizontally centered */
  transform: translateX(-50%); /* Adjust for true centering */
  width: 380px; /* A suitable width for a small window */
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
  z-index: 100001; /* Ensure it's on top, slightly higher than before if needed */
  overflow: hidden; /* To contain rounded corners with header */
}

#gcmSearchUIContainer.hidden {
  display: none;
}

#gcmSearchUIHeader {
  padding: 10px 15px;
  background-color: #e8e8e8;
  border-bottom: 1px solid #ccc;
  cursor: move; /* Indicates this area is draggable */
  border-top-left-radius: 8px; /* Match container's radius */
  border-top-right-radius: 8px; /* Match container's radius */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#gcmSearchUIHeader .gcm-title {
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
}

#gcmSearchUIHeader #gcmCloseSearchBtnDraggable { /* Specific ID for close button in this context */
  background: none;
  border: none;
  font-size: 1.3em;
  font-weight: bold;
  color: #777;
  cursor: pointer;
  padding: 0 5px;
}
#gcmSearchUIHeader #gcmCloseSearchBtnDraggable:hover {
  color: #000;
}

#gcmSearchUIBody {
  padding: 15px;
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  gap: 10px; /* Space between elements in the body */
}

#gcmSearchUIBody #gcmSearchInputDraggable { /* Specific ID for input */
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#gcmSearchUIBody .gcm-controls-row {
  display: flex;
  justify-content: space-between; /* Space out controls */
  align-items: center;
  gap: 8px; /* Space between buttons in a row */
}

#gcmSearchUIBody .gcm-navigation {
    display: flex;
    gap: 5px;
}

#gcmSearchUIBody button {
  padding: 8px 12px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background-color: #e7e7e7;
  cursor: pointer;
  min-width: 40px; /* For Next/Prev buttons */
  text-align: center;
}

#gcmSearchUIBody button:hover {
  background-color: #d7d7d7;
}

#gcmSearchUIBody #gcmSearchBtnDraggable { /* Specific ID */
    flex-grow: 1; /* Allow Find button to take more space if needed */
}

#gcmSearchUIBody .gcm-results-count-draggable { /* Specific ID */
  font-size: 0.95em;
  color: #333;
  white-space: nowrap; /* Prevent wrapping */
}

/* --- Highlighting Styles (remain the same) --- */
.custom-highlight {
  background-color: yellow;
  color: black;
  font-weight: bold;
}

.custom-highlight.current-custom-highlight {
  background-color: orange;
  outline: 1px solid red;
}

Do not forget to remove the leading php on that downloaded snippet before you insert it to your child-theme functions.php

Download: https://pastebin.com/dl/zc4fvX1w