Characteristics Selection Radio Button

  • Posts: 799
  • Thank you received: 10
  • Hikashop Business
1 month 1 week ago #321641

-- HikaShop version -- : 4.3.0

I am using the radio button as the option to select a product size. I have the below CSS on my label on hover and it works fine.

#hikashop_product_characteristics div.controls label:hover {
  color: #ffffff;
  background-color: #196691;
}

I want the background colour to be the same as the hover colour when the size/button is selected. No matter what I try to get an active background color it does not work - and I've tried a lot of options.

So, I'm wondering before I waste anymore time, is this just not possible to do?

I've attached a screenshot of the button code.



Thanks!

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 2647
  • Thank you received: 348
  • MODERATOR
1 month 3 days ago #321750

Hello,

I'm afraid that only Css won't be enough to be able to add style on label from your input condition.
I detail my idea through this pseudo code :

<label class="parent">
    <input class="child" checked="checked">
so far there are no Css command to create a selector that start from child with "checked" state to select his parent.

The only solution, is to add Javacript to add some class to your label, and so this require more development skills.
Sorry for this return but we didn't see other way to proceed.

Regards

Last edit: 1 month 3 days ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 799
  • Thank you received: 10
  • Hikashop Business
1 month 1 day ago #321827

Thanks Philip.

Is it not possible to add a class to the label in display > views?

Thanks!

Please Log in or Create an account to join the conversation.

  • Posts: 2647
  • Thank you received: 348
  • MODERATOR
1 month 1 day ago #321844

Hello,

Through an override view, yes it's possible to add a class, but you want add class dynamically :

<label class="parent parentChecked">
    <input class="child" checked="checked">
And :
<label class="parent">
    <input class="child" checked="checked">
With this kind of css :
label.parentChecked {
     background-color: blue;
}

That's why you need some javascript to add/remove specific class in order to apply (or not) your Css.
Hope this will help you to progress on this subject.
Regards

Last edit: 1 month 1 day ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 799
  • Thank you received: 10
  • Hikashop Business
1 week 5 days ago #322424

Can this be added as a feature/improvement to Hikashop going forward?

Thanks!

Please Log in or Create an account to join the conversation.

Time to create page: 0.069 seconds
Powered by Kunena Forum