{"id":181092,"date":"2014-08-29T19:36:53","date_gmt":"2014-08-30T02:36:53","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=181092"},"modified":"2022-02-14T07:49:04","modified_gmt":"2022-02-14T15:49:04","slug":"selection","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/s\/selection\/","title":{"rendered":"::selection"},"content":{"rendered":"\n<p>Use your cursor select this sentence. Notice how as you select the text a background color fills the space? You can change the background color and color of selected text by styling <code>::selection<\/code>. Styling this pseudo element is great for matching user-selected text to your sites color scheme.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p::selection {\n  background: #fff;\n  color: #ff0000;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1602\" height=\"532\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-7.46.42-AM.png?resize=1602%2C532&#038;ssl=1\" alt=\"Screenshot of selected text styled with the ::selection pseudo-element in CSS in white with a red background.\" class=\"wp-image-363720\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-7.46.42-AM.png?w=1602&amp;ssl=1 1602w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-7.46.42-AM.png?resize=300%2C100&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-7.46.42-AM.png?resize=1024%2C340&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-7.46.42-AM.png?resize=768%2C255&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-7.46.42-AM.png?resize=1536%2C510&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-7.46.42-AM.png?resize=1000%2C332&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Take note that the double colon is necessary in the syntax for this pseudo element, despite that <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-elements#Notes\" rel=\"noopener\">other pseudo-elements accept a single colon<\/a>.<\/p>\n\n\n\n<p>As seen above, you can style <code>::selection<\/code> on individual elements. You can also style the entire page by dropping the bare pseudo-element in your stylesheet.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">::selection { background: yellow; }<\/code><\/pre>\n\n\n\n<p>There are only three properties that <code>::selection<\/code> will work with:<\/p>\n\n\n\n<ul><li><code>color<\/code><\/li><li><code>background<\/code> (specifically the <code>background-color<\/code>, <code>background-image<\/code> longhand properties)<\/li><li><code>text-shadow<\/code><\/li><\/ul>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qNLymj\" src=\"\/\/codepen.io\/anon\/embed\/qNLymj?height=800&amp;theme-id=1&amp;slug-hash=qNLymj&amp;default-tab=result\" height=\"800\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qNLymj\" title=\"CodePen Embed qNLymj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you try to style <code>::selection<\/code> with a property that\u2019s not on the list, then that property will be ignored. It may be tricky seeing <code>background<\/code> in that list because the property will only render a color when used on <code>::selection<\/code> and it won&#8217;t render a background image or gradient.<\/p>\n\n\n\n<p>Also don&#8217;t try this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p::-moz-selection,\np::selection { color: red; }<\/code><\/pre>\n\n\n\n<p>When browsers find a part of a select they don&#8217;t understand, they drop the entire thing, so this will fail all the time.<\/p>\n\n\n\n<p>One of the most helpful uses for <code>::selection<\/code> is turning off a <code>text-shadow<\/code> during selection. A <code>text-shadow<\/code> can clash with the selection&#8217;s background color and make the text difficult to read. Set <code>text-shadow: none;<\/code> to make text clear and easy to read during selection.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wWRxdN\" src=\"\/\/codepen.io\/anon\/embed\/wWRxdN?height=350&amp;theme-id=1&amp;slug-hash=wWRxdN&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wWRxdN\" title=\"CodePen Embed wWRxdN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"fancy-selection\">Fancy <code>::selection<\/code><\/h3>\n\n\n<p>Paired with Sass, or any other preprocessor, you can make really cool effects with <code>::selection<\/code>. Select the text in the demo below:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_Yzvqej\/5ee2c6a3e825753802755bd08fcd5c5f\" src=\"\/\/codepen.io\/anon\/embed\/Yzvqej\/5ee2c6a3e825753802755bd08fcd5c5f?height=350&amp;theme-id=1&amp;slug-hash=Yzvqej\/5ee2c6a3e825753802755bd08fcd5c5f&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed Yzvqej\/5ee2c6a3e825753802755bd08fcd5c5f\" title=\"CodePen Embed Yzvqej\/5ee2c6a3e825753802755bd08fcd5c5f\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>You might notice the effect is not so smooth in some browsers. Let&#8217;s file that demo under: things that are possible, but probably just for fun.<\/p>\n\n\n\n<p>Another dumb-but-fun little trick is <a href=\"https:\/\/css-tricks.com\/reveal-a-background-image-upon-text-selection\/\">revealing an image through selected text<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-selection\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">2*<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">9<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">3.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">4.4<\/span><\/td><td class=\"n nope\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-pseudo\/#selectordef-selection\" rel=\"noopener\">CSS Pseudo-Elements Module Level 4 specification<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::selection\" rel=\"noopener\">MDN<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Use your cursor select this sentence. Notice how as you select the text a background color fills the space? You can change the background color and color of selected text by styling ::selection. Styling this pseudo element is great for matching user-selected text to your sites color scheme.<\/p>\n","protected":false},"author":200919,"featured_media":363720,"parent":14269,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":154816,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-file-input-styling-webkitblink\/","url_meta":{"origin":181092,"position":0},"title":"Custom File Input Styling","date":"October 31, 2013","format":false,"excerpt":"If you're interested in Webkit\/Blink\/Chrome specific styling, there is a proprietary pseudo element to hide, and then use an also non-standard psudeo-on-an-input: <input class=\"custom-file-input\" type=\"file\"> .custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px\u2026","rel":"","context":"In \"file input\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196161,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-clip\/","url_meta":{"origin":181092,"position":1},"title":"background-clip","date":"February 17, 2015","format":false,"excerpt":"background-clip lets you control how far a background image or color extends beyond an element's padding or content. .frame { background-clip: padding-box; } Values border-box is the default value. This allows the background to extend all the way to the outside edge of the element's border.padding-box clips the background at\u2026","rel":"","context":"In \"background-clip\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":240781,"url":"https:\/\/css-tricks.com\/snippets\/css\/change-autocomplete-styles-webkit-browsers\/","url_meta":{"origin":181092,"position":2},"title":"Change Autocomplete Styles in WebKit Browsers","date":"April 21, 2016","format":false,"excerpt":"We got a nice tip from Lydia Dugger via email with a method for changing the styles that WebKit browsers apply to form fields that have been autocompleted. What we mean by autocomplete Many browsers (including Chrome and Safari) provide a setting that allows users to automatically fill in details\u2026","rel":"","context":"With 39 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3342,"url":"https:\/\/css-tricks.com\/snippets\/css\/change-text-selection-color\/","url_meta":{"origin":181092,"position":3},"title":"Change Text Selection Color","date":"August 10, 2009","format":false,"excerpt":"::selection { background-color: #FFA; color: #000; } (More info)","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":373609,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/autofill\/","url_meta":{"origin":181092,"position":4},"title":":autofill","date":"September 27, 2022","format":false,"excerpt":"The :auto-fill pseudo-class in CSS allows us to style <input> elements that contain content auto-filled by the browser. Take a new user registration form as an example. Have you ever clicked or tapped into a field and seen a dropdown of suggestions for what to enter? Notice how the autocompleted\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376465,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/color-scheme\/","url_meta":{"origin":181092,"position":5},"title":"color-scheme","date":"January 27, 2023","format":false,"excerpt":"You know how we have \u201cdark mode\u201d and \u201clight mode\u201d these days? Browsers also have \"dark\" and \"light\" color schemes baked into their default styles. The CSS color-scheme property lets the browser use (or choose) to display certain elements with its dark or light default styling. :root { color-scheme: light\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/181092"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/200919"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=181092"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/181092\/revisions"}],"predecessor-version":[{"id":363722,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/181092\/revisions\/363722"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/363720"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=181092"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=181092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}