{"id":934,"date":"2014-01-23T16:55:24","date_gmt":"2014-01-23T15:55:24","guid":{"rendered":"http:\/\/www.speich.net\/articles\/?p=934"},"modified":"2019-11-16T11:19:13","modified_gmt":"2019-11-16T10:19:13","slug":"css-trick-setting-background-color-of-a-selected-html-option-element","status":"publish","type":"post","link":"https:\/\/www.speich.net\/articles\/en\/2014\/01\/23\/css-trick-setting-background-color-of-a-selected-html-option-element\/","title":{"rendered":"CSS trick: Setting background color of a selected HTML option element"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Update 02.02.2018<\/strong>: As noted by <a href=\"https:\/\/www.speich.net\/articles\/en\/2014\/01\/23\/css-trick-setting-background-color-of-a-selected-html-option-element\/#comment-187\">Tom<\/a> this now only works when the attribute multiple is set.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Have you ever wanted to set the background color of a selected OPTION element of a drop down ? Unfortunately, setting the CSS background-color property does not work for (most\/all?) browsers, but there is a <a title=\"OPTION allows 'background-image' style but does not allow 'background-color' or 'color'\" rel=\"noopener noreferrer\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=558612\" target=\"_blank\">workaround<\/a> using the background-image property instead:<\/p>\n\n\n\n<pre><code class=\"language-css\">option:checked, option:hover {\n    color: white;\n    background: #488f8f repeat url(\"data:image\/gif;base64,R0lGO...\");\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><style>\n.demo { \n  display: grid;\n  grid-template-columns: max-content max-content;\n  row-gap: 0.5em;\n}\n.demo label { margin-right: 1em; }\n\n.demo option:checked, .demo option:hover {\n  color: white;\n  background: #488f8f repeat url(\"data:image\/gif;base64,R0lGODlhAQABAIAAAEmPjwAAACH\/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxNC0wMS0yM1QxNDo0NDoxOCswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTQtMDEtMjNUMTQ6NDQ6MzIrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTQtMDEtMjNUMTQ6NDQ6MzIrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvZ2lmIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdDRkY3OTYyODQzNDExRTNBRUI0QUY0MzMyNkVBREZBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdDRkY3OTYzODQzNDExRTNBRUI0QUY0MzMyNkVBREZBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0NGRjc5NjA4NDM0MTFFM0FFQjRBRjQzMzI2RUFERkEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0NGRjc5NjE4NDM0MTFFM0FFQjRBRjQzMzI2RUFERkEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw\/eHBhY2tldCBlbmQ9InIiPz4B\/\/79\/Pv6+fj39vX08\/Lx8O\/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB\/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAAQABAAACAkQBADs=\");\n}\n\n.demo .single option:hover {\n  background-color: #488f8f;\n}\n<\/style><\/p>\n\n\n\n<div class=\"demo\">\n<label>multiple select:<\/label><select multiple=\"multiple\">\n<option>Photo archive<\/option>\n<option>Photography<\/option>\n<option selected=\"selected\">Birds<\/option>\n<option>Wildlife<\/option>\n<\/select>\n<label>single select:<\/label><select class=\"single\">\n<option>Photo archive<\/option>\n<option>Photography<\/option>\n<option selected=\"selected\">Birds<\/option>\n<option>Wildlife<\/option>\n<\/select>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">If you are interested in highlighting when hovering with the mouse only, then setting the background-color property is enough, e.g:<\/p>\n\n\n\n<pre><code class=\"language-css\">option:hover {\n  background-color: #488f8f; \n} \n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can convert your image to a data url online on <a title=\"Data Url Maker\" rel=\"noopener noreferrer\" href=\"http:\/\/dataurl.net\/#dataurlmaker\" target=\"_blank\">Data Url Maker<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update 02.02.2018: As noted by Tom this now only works when the attribute multiple is set. Have you ever wanted to set the background color of a selected OPTION element of a drop down ? Unfortunately, setting the CSS background-color property does not work for (most\/all?) browsers, but there is a workaround using the background-image &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.speich.net\/articles\/en\/2014\/01\/23\/css-trick-setting-background-color-of-a-selected-html-option-element\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;CSS trick: Setting background color of a selected HTML option element&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[248],"tags":[20,45],"class_list":["post-934","post","type-post","status-publish","format-standard","hentry","category-cascading-style-sheets-css","tag-css","tag-html","entry"],"_links":{"self":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts\/934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/comments?post=934"}],"version-history":[{"count":16,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts\/934\/revisions"}],"predecessor-version":[{"id":1718,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts\/934\/revisions\/1718"}],"wp:attachment":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/media?parent=934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/categories?post=934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/tags?post=934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}