Fields style and background color change and border change

  • Resolved haseeb002

    (@haseeb002)


    9 months, 1 week ago

    Hi, I hope you are well sir. Sir I need your help urgently i want to change the style of fields my client wants a style of field like woocommerce billing fields in which the background is transparent with border color so please tell me how I do that because I’m unable to do it. Previous look like this

    i want like this so please help i’m attaching the screen shot



Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Jonas

    (@flinnn)

    Hi haseeb002,

    thanks for reaching out.
    You can change the colors in the plugin’s settings.
    And you can use the following CSS to change the style:

    .wcdp_options>li>.wcdp-button-label?{
    border-radius: 50px;
    border: 1px?solid?var(--wcdp-main-2);
    background: none;
    }

    Best,
    Jonas

    Thread Starter haseeb002

    (@haseeb002)

    Hi sir, this is not working but i'm get the code from chat gpt and this working kindly review



/* Style for labels / .wcdp_options label { display: inline-block; padding: 10px 20px; border-radius: 20px; border: 2px solid #d9d9d9; / Border color / color: #d9d9d9; / Text color / cursor: pointer; background-color: #ffffff; / Set background color to white */
}

/* Style for checked radio buttons / .wcdp_options input[type="radio"]:checked + label { background-color: transparent; / Background color when checked / color: #ffffff; / Text color when checked / } / Style for labels / .wcdp_options>li>label { text-align: center; display: block; background: #ffffff; / Set background color to white / color: var(--label-text); padding: 6px; cursor: pointer; } / Style for labels / .wcdp_options>li>label { text-align: center; display: block; background: #ffffff; / Set background color to white */
color: var(--label-text);
padding: 6px;
cursor: pointer;
}

/* Prevent background color change on hover / .wcdp_options>li>label:hover { background: #ffffff !important; / Ensure background color remains white on hover / } / Style for labels / .wcdp_options>li>label { text-align: center; display: block; background: #ffffff; / Set default background color to white */
color: var(--label-text);
padding: 6px;
cursor: pointer;
}

/* Style for labels / .wcdp_options>li>label { text-align: center; display: block; background: #ffffff; / Set default background color to white / color: var(--label-text); padding: 6px; cursor: pointer; } / Style for labels / .wcdp_options>li>label { text-align: center; display: block; background: #ffffff; / Set default background color to white */
color: var(--label-text);
padding: 6px;
cursor: pointer;
}

/* Change background color and text color when radio button is checked / .wcdp_options input[type="radio"]:checked + label { background: #F74F22; / Set background color to #F74F22 when radio button is checked / color: #ffffff; / Set text color to white when radio button is checked */
}

/* Prevent background color change on hover / .wcdp_options>li>label:hover { background: #ffffff !important; / Ensure background color
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Fields style and background color change and border change’ is closed to new replies.