color-picker-for-fronted.php

<style>
  /* Child Theme - Custom CSS File for Buyers to Modify */
.wp-customizer .wp-picker-input-wrap .button, .wp-picker-input-wrap .button {
    width: auto;
	display: inline-block;
	background: #ea723d !important;
	color: #fff !important;
	 border: 0 !important;
}
.wp-picker-container .wp-color-result.button{
	background:none;
}
.wp-color-result-text {
    background: #ea723d !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    color: #fff !important;
	font-size: 1.5rem !important;
    padding: 1.29rem 2rem !important;
    text-align: center !important;
    outline: 0 !important;
    line-height: 1.2 !important;
	margin-bottom: 0 !important;
}
.wp-picker-input-wrap label{
	margin-bottom: 0 !important;
}
.wp-picker-container .wp-color-result.button{
	height: auto !important;
	box-shadow: none !important;
}
.wp-picker-container button{
	cursor:pointer !important;
}
.wp-picker-container {
   position:relative;
}
.wp-picker-holder{
	position:absolute;
	z-index:9;
}
</style>
<script>
  /* Child Theme - Custom JS File for Users to add their own JS code */
jQuery(document).ready(function($){
	if( $('.my-color-field').length){
		$('.my-color-field').wpColorPicker();
	}
    
</script>
<?php

wp_enqueue_style( 'wp-color-picker' );
				wp_enqueue_script(
					'iris',
					admin_url( 'js/iris.min.js' ),
					array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
					false,
					1
				);
				wp_enqueue_script(
					'wp-color-picker',
					admin_url( 'js/color-picker.min.js' ),
					array( 'iris' ),
					false,
					1
				);
				$colorpicker_l10n = array(
					'clear' => __( 'Clear' ),
					'defaultString' => __( 'Default' ),
					'pick' => __( 'Select Color' ),
					'current' => __( 'Current Color' ),
				);
				wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n );