[Resolved] Changing Dropdown Form Color

Home Forums Support [Resolved] Changing Dropdown Form Color

Home Forums Support Changing Dropdown Form Color

  • This topic has 5 replies, 4 voices, and was last updated 2 years ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #917491
    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!

    #917560
    David
    Staff
    Customer Support

    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;
    }
    #917595
    Charles

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

    #917787
    David
    Staff
    Customer Support
    #929802
    Yulia

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

    #929816
    Leo
    Staff
    Customer Support

    Which dropdown form are you referring to?

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

    Thanks ๐Ÿ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.