Contact Form Styling

Hey rlogan2334,

Thank you for using Enfold.

Use this to change the color of the placeholder:

::-webkit-input-placeholder {
   color: #ffffff;
}

:-moz-placeholder { /* Firefox 18- */
   color: #ffffff;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #ffffff;  
}

:-ms-input-placeholder {  
   color: #ffffff;  
}

This one for the option element:

select {
    color: #ffffff !important;
}

select option {
    color: #000000 !important;
}

Unfortunately, you can’t style or add a transparent background to the option value.

Best regards,
Ismael

Hi,

1.) Add this in the functions.php file:

add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	function a() {
		var select = $('#top .entry-content-wrapper select');
	    select.css('color','#ffffff');
	    select.change(function() {
	       var current = $('#top .entry-content-wrapper select').val();
	       if (current != 'null') {
	           select.css('color','#000000');
	       } else {
	           select.css('color','#ffffff');
	       }
	    });
    }

	a();
})(jQuery);
</script>
<?php
}

.. and the following code in the Quick CSS field:

#top .entry-content-wrapper select option {
    color: #000000;
}

2.) Unfortunately, you cannot define a different color for the asterisk because it is included in the placeholder attribute.

UPDATE: We added this css code for the placeholder.

::-webkit-input-placeholder {
   color: #ffffff !important;
}

:-moz-placeholder { /* Firefox 18- */
   color: #ffffff !important;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #ffffff !important;  
}

:-ms-input-placeholder {  
   color: #ffffff !important;  
}

Best regards,
Ismael