How to change placeholder color?

Browsers make placeholders semi-transparent. Sometimes it can be inconsistent with WCAG 1.4.3. It’s possible to override it using custom CSS. Below is some sample code that makes placeholders more visible.

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
	opacity: 0.8 !important;
	color: black !important;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::-webkit-input-placeholder {
	opacity: 0.8 !important;
	color: black !important;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:-moz-placeholder {
	opacity: 0.8 !important;
	color: black !important;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::-moz-placeholder {
	opacity: 0.8 !important;
	color: black !important;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:-ms-input-placeholder {
	opacity: 0.8 !important;
	color: black !important;
}

ⓘLearn how to add custom CSS to your WordPress.