{"id":2519,"date":"2017-11-03T02:48:06","date_gmt":"2017-11-03T02:48:06","guid":{"rendered":"http:\/\/docs.contentviewspro.com\/?p=2519"},"modified":"2023-12-27T10:38:01","modified_gmt":"2023-12-27T10:38:01","password":"","slug":"live-filter-change-background-and-text-color-of-elements","status":"publish","type":"docs","link":"https:\/\/contentviewspro.com\/documentation\/article\/live-filter-change-background-and-text-color-of-elements\/","title":{"rendered":"Live Filter &#8211; change background &#038; text color of label, buttons, range slider"},"content":{"rendered":"<p>Please add this code to <strong>Custom CSS<\/strong> field in Content Views &gt;&gt; Settings page, and change the value as your expectation:<\/p>\n<h2>the label text<\/h2>\n<pre style=\"font-size: 13px;\">.cvp-live-filter .cvp-label {\n    background: red !important;\n    color: #fff !important;\n    padding: 5px;\n}\n<\/pre>\n<h2>the Submit button<\/h2>\n<pre style=\"font-size: 13px;\">.cvp-live-button .cvp-live-submit {\n    color: #fff !important;\n    background-color: #5cb85c !important;\n}\n<\/pre>\n<h2>the Reset button<\/h2>\n<pre style=\"font-size: 13px;\">.cvp-live-button .cvp-live-reset {\n    color: #fff !important;\n    background-color: #d9534f !important;\n}\n<\/pre>\n<h2>the active &#8220;Button&#8221; type<\/h2>\n<pre style=\"font-size: 13px;\">.cvp-live-filter.cvp-button input[type=radio]:checked+div {\n    background: #00aeef !important;\n    color: #fff !important;\n}\n<\/pre>\n<h2>the &#8220;Range Slider&#8221; filter<\/h2>\n<p># Change the green background color<\/p>\n<pre style=\"font-size: 13px;\">.cvp-range .irs-bar, .irs-from, .irs-single, .irs-to {background: #20b426 !important;}\n.cvp-range .irs-bar {border-color: transparent !important;}\n<\/pre>\n<p># Change the width of the bar<\/p>\n<pre style=\"font-size: 13px;\">.irs-with-grid {width: 90%;} \/* change the percentage value *\/\n<\/pre>\n<p>Best regards,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Please add this code to Custom CSS field in Content Views &gt;&gt; Settings page, and change the value as your expectation: the label text .cvp-live-filter .cvp-label { background: red !important; color: #fff !important; padding: 5px; } the Submit button .cvp-live-button .cvp-live-submit { color: #fff !important; background-color: #5cb85c !important; } the Reset button .cvp-live-button .cvp-live-reset { &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/contentviewspro.com\/documentation\/article\/live-filter-change-background-and-text-color-of-elements\/\"> <span class=\"screen-reader-text\">Live Filter &#8211; change background &#038; text color of label, buttons, range slider<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"doc_category":[],"doc_tag":[29,35],"class_list":["post-2519","docs","type-docs","status-publish","hentry","doc_tag-custom-css","doc_tag-live-filter"],"year_month":"2026-09","word_count":112,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"CVP","author_nicename":"cvp","author_url":"https:\/\/contentviewspro.com\/documentation\/author\/cvp\/"},"doc_category_info":[],"doc_tag_info":[{"term_name":"custom CSS","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/custom-css\/"},{"term_name":"live filter","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/live-filter\/"}],"_links":{"self":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/2519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/comments?post=2519"}],"version-history":[{"count":3,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/2519\/revisions"}],"predecessor-version":[{"id":5424,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/2519\/revisions\/5424"}],"wp:attachment":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/media?parent=2519"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=2519"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=2519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}