[Resolved] Changing Dropdown Form Color

[Charles]

I’ve created a site based on the “Head On” template which is here: https://generatepress.com/site-library/ but having trouble changing the color of the dropdown form element. I looked everywhere in the Customizer and can’t find anything there, although there are settings for the buttons and other form elements. I have Generatepress premium, if that makes a difference.

Any help appreciated!

[David]

Hi there,

in the Customizer > Additional CSS you will find the custom styling for the site. This section is where the specific colors are set – theres quite a few 🙂 :

/* ------
Contact Form
------- */
/* Field Styling */

input[type="text"], 
input[type="email"], 
input[type="url"], 
input[type="password"], 
input[type="search"], 
input[type="tel"], 
input[type="number"], 
textarea {
  background-color: #F1AD0F;
	border: none;
	width: 100%;
}
input[type="submit"] {
	border: 1px solid;
}
.wpcf7-response-output {
	margin: 0 !important;
}
.wpcf7-response-output.wpcf7-mail-sent-ok {
	background-color: #F1AD0F !important;
	border: none;
}
.wpcf7-response-output.wpcf7-validation-errors {
	background-color: #f00;
	border: none;
}
::-webkit-input-placeholder { /* WebKit browsers */
  color:    #000;
	font-weight: 300;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    #000;
	font-weight: 300;	
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    #000;
	font-weight: 300;	
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color:    #000;
	font-weight: 300;	
}

/* Drop down styling */
body select { 
	display: block; 
	padding: 10px 70px 10px 13px !important; 
	width: 100%; 
	height: auto !important;
	border: none;
	background: url("https://headon.assemblewp.com/wp-content/uploads/2018/01/form-down-arrow.svg") right center no-repeat; 
	background-color: #f1ad0f;
	color: #000; 
	font-weight: 300;	
	appearance: none; /* this is must */ 
	-webkit-appearance: none; -moz-appearance: none; 
} /* body select.select_box option */
body select option { 
	padding: 0 4px; 
} /* for IE and Edge */
select::-ms-expand { 
	display: none; 
} 
select:disabled::-ms-expand {
	background: #f60; 
}
select option {
	background-color: #000 !Important;
}

[Charles]

Perfect, this is exactly what I was looking for. Thank you!

[David]

Glad to be of help

[Yulia]

Hi, is it possible to make dropdown select element transparent like here:
https://y.co/yachts-for-sale/yachts/all?max_m=30

[Leo]

Which dropdown form are you referring to?

Any chance you can open a new topic and link us to the page in question?

Thanks 🙂

[Author]

Posts