Custom CSS for Selected Swatch

  • industrialtex

    (@industrialtex)


    2 years ago

    Hello,

    Could you please help as to how could I change the design to match the design as per the other swatches on my site.

    The selected swatches have a black background color and white font color, while the other have a vice verse. Refer to Screen Shot – https://prnt.sc/1UginenCNAcf

    I tried customizing the CSS but both selected and not selected ones are being changed to black. Could you please with this.

    Thanks
    Rahul

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter industrialtex

    (@industrialtex)

    I figured something like this from inspect window. Could you please help me verify it and how structure it so implement it correctly. Thanks 

    .wpclv-attributes .wpclv-terms .wpclv-term span, .wpclv-attributes .wpclv-terms .wpclv-term a {

    /* background-color: black; */
    /* padding: 11px 15px; */
}


.wpclv-attributes .wpclv-terms .wpclv-term.active, .wpclv-attributes .wpclv-terms .wpclv-term:hover {
    /* border-color: green; */
    background-color: black;
    color: white;
}


.wpclv-attributes .wpclv-terms .wpclv-term {
  
    /* border-width: 1px; */
    /* border-style: solid; */
    /* border-color: #ddd; */
    /* background-color: #fff; */
    /* float: left; */
    border: 1px solid #333;
}

    There is something not right as what I figured.

    Thread Starter industrialtex

    (@industrialtex)

    Hello,

    I have been able to achieve this. https://prnt.sc/sIDy1ee6_pSt

    Could you please help me how could I make the white area on hover shown by arrow to be same as background on hover.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom CSS for Selected Swatch’ is closed to new replies.