Archived topic
Changing Dropdown Form Color
5 replies · Started by Charles on June 2, 2019
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!
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;
}Perfect, this is exactly what I was looking for. Thank you!
Glad to be of help
Hi, is it possible to make dropdown select element transparent like here:
https://y.co/yachts-for-sale/yachts/all?max_m=30
Which dropdown form are you referring to?
Any chance you can open a new topic and link us to the page in question?
Thanks :)
