{"id":4061,"date":"2017-02-22T02:45:42","date_gmt":"2017-02-22T07:45:42","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=4061"},"modified":"2024-02-20T16:47:05","modified_gmt":"2024-02-20T13:47:05","slug":"change-text-selection-color-css","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/","title":{"rendered":"How to Change Text Selection Color Using CSS"},"content":{"rendered":"\n<p>The <strong>CSS3 ::selection<\/strong> pseudo-element is one of those things that were drafted into the <a href=\"\/\/local.brightwhiz\/tag\/css\/\">CSS3<\/a> standard then somewhere down the road it was pulled out therefore it is not part of the official specification. Suffice to say that you can still use it in all browsers to change text selection should you want to do it.<\/p>\n\n\n\n<p>Changing the selection colors on a website is probably one of the least done things across the board. Nevertheless, we will take a good look at how it works.<\/p>\n\n\n\n<p>The <strong>CSS3 ::selection<\/strong> Selector supports four properties namely background, color, cursor, and outline. As with CSS properties, these are generally self-explanatory and they work in exactly the same way as all CSS properties.<\/p>\n\n\n\n<p>This selector is basically used to match the portion of an <a href=\"\/\/local.brightwhiz\/tag\/html\/\">HTML<\/a> element that is selected by a user.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Here&#8217;s How to Change Text Selection by Example<\/h2>\n\n\n\n<p>The syntax is basically this:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">::selection {\ncss declarations;\n}<\/code><\/pre>\n\n\n\n<p>The example in the link below changes the selected text to yellow and the background to blue&#8230; (No relation to the legacy Windows blue screen of death).<\/p>\n\n\n\n<ul><li><strong>Change Text Selection &#8211; CodePen<\/strong><\/li><\/ul>\n\n\n\n<p>Notice for Firefox and the Mozilla family, we are using the browser-specific selector while the rest of the browsers do not need it. There you have it. You now know how to change text selection using CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The CSS3 ::selection pseudo-element is one of those things that were drafted into the CSS3 standard then somewhere down the road it was pulled out therefore it is not part&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4065,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23,17,20],"tags":[106,170,189,195,303,320,543,600,635,637],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How can I Change Text Selection Color Using CSS Selection Properties<\/title>\n<meta name=\"description\" content=\"Here is a quick tip and example of how you can change text selection color using CSS selection properties on your website\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can I Change Text Selection Color Using CSS Selection Properties\" \/>\n<meta property=\"og:description\" content=\"Here is a quick tip and example of how you can change text selection color using CSS selection properties on your website\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-22T07:45:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-20T13:47:05+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Change-Text-Selection.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"How to Change Text Selection Color Using CSS\",\"datePublished\":\"2017-02-22T07:45:42+00:00\",\"dateModified\":\"2024-02-20T13:47:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/\"},\"wordCount\":228,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Change-Text-Selection.jpg\",\"keywords\":[\"Browsers\",\"CSS\",\"Design\",\"Digital arts\",\"HTML\",\"Internet\",\"Software Design\",\"Ui\/Ux\",\"Web\",\"Web Design\"],\"articleSection\":[\"Articles\",\"Guides\",\"Tips\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/\",\"url\":\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/\",\"name\":\"How can I Change Text Selection Color Using CSS Selection Properties\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Change-Text-Selection.jpg\",\"datePublished\":\"2017-02-22T07:45:42+00:00\",\"dateModified\":\"2024-02-20T13:47:05+00:00\",\"description\":\"Here is a quick tip and example of how you can change text selection color using CSS selection properties on your website\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Change-Text-Selection.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Change-Text-Selection.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Change Text Selection\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Change Text Selection Color Using CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/x.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How can I Change Text Selection Color Using CSS Selection Properties","description":"Here is a quick tip and example of how you can change text selection color using CSS selection properties on your website","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/","og_locale":"en_US","og_type":"article","og_title":"How can I Change Text Selection Color Using CSS Selection Properties","og_description":"Here is a quick tip and example of how you can change text selection color using CSS selection properties on your website","og_url":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2017-02-22T07:45:42+00:00","article_modified_time":"2024-02-20T13:47:05+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Change-Text-Selection.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"How to Change Text Selection Color Using CSS","datePublished":"2017-02-22T07:45:42+00:00","dateModified":"2024-02-20T13:47:05+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/"},"wordCount":228,"commentCount":0,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Change-Text-Selection.jpg","keywords":["Browsers","CSS","Design","Digital arts","HTML","Internet","Software Design","Ui\/Ux","Web","Web Design"],"articleSection":["Articles","Guides","Tips","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/local.brightwhiz\/change-text-selection-color-css\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/","url":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/","name":"How can I Change Text Selection Color Using CSS Selection Properties","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Change-Text-Selection.jpg","datePublished":"2017-02-22T07:45:42+00:00","dateModified":"2024-02-20T13:47:05+00:00","description":"Here is a quick tip and example of how you can change text selection color using CSS selection properties on your website","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/change-text-selection-color-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Change-Text-Selection.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Change-Text-Selection.jpg","width":1200,"height":630,"caption":"Change Text Selection"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/change-text-selection-color-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"How to Change Text Selection Color Using CSS"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/x.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4061"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=4061"}],"version-history":[{"count":1,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4061\/revisions"}],"predecessor-version":[{"id":13571,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4061\/revisions\/13571"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/4065"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=4061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=4061"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=4061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}