UI Components์ถ์ฒ: CSS-Tricks์กฐํ์ 11
Styling ::search-text and Other Highlight-y Pseudo-Elements
By Daniel Schwarz2026๋
1์ 29์ผ
**Styling ::search-text and Other Highlight-y Pseudo-Elements**
Chrome 144 recently shipped ::search-text, which is now one of several highlight-related pseudo-elements. This one selects find-in-page text, which is the text that gets highlighted when you do a Ctrl/Command + F-type search for something on a page and matches are found. By default, ::search-text matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that. Iโll admit, I hadnโt really been following these highlight pseudo-elements. Up until now, I didnโt even know that there was a name for them, but Iโm glad there is because that makes it easier to round them all up and compare them, which is exactly what Iโm going to do here today, as itโs not super obvious what they do based on the name of the pseudo-element...
---
**[devsupporter ํด์ค]**
์ด ๊ธฐ์ฌ๋ CSS-Tricks์์ ์ ๊ณตํ๋ ์ต์ ๊ฐ๋ฐ ๋ํฅ์ ๋๋ค. ๊ด๋ จ ๋๊ตฌ๋ ๊ธฐ์ ์ ๋ํด ๋ ์์๋ณด์๋ ค๋ฉด ์๋ณธ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ์ธ์.
Chrome 144 recently shipped ::search-text, which is now one of several highlight-related pseudo-elements. This one selects find-in-page text, which is the text that gets highlighted when you do a Ctrl/Command + F-type search for something on a page and matches are found. By default, ::search-text matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that. Iโll admit, I hadnโt really been following these highlight pseudo-elements. Up until now, I didnโt even know that there was a name for them, but Iโm glad there is because that makes it easier to round them all up and compare them, which is exactly what Iโm going to do here today, as itโs not super obvious what they do based on the name of the pseudo-element...
---
**[devsupporter ํด์ค]**
์ด ๊ธฐ์ฌ๋ CSS-Tricks์์ ์ ๊ณตํ๋ ์ต์ ๊ฐ๋ฐ ๋ํฅ์ ๋๋ค. ๊ด๋ จ ๋๊ตฌ๋ ๊ธฐ์ ์ ๋ํด ๋ ์์๋ณด์๋ ค๋ฉด ์๋ณธ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ์ธ์.
