Characteristics Selection Radio Button

  • Posts: 962
  • Thank you received: 11
  • Hikashop Business
3 years 9 months 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: 4509
  • Thank you received: 611
  • MODERATOR
3 years 9 months 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: 3 years 9 months ago by Philip.

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

  • Posts: 962
  • Thank you received: 11
  • Hikashop Business
3 years 9 months 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: 4509
  • Thank you received: 611
  • MODERATOR
3 years 9 months 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: 3 years 9 months ago by Philip.

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

  • Posts: 962
  • Thank you received: 11
  • Hikashop Business
3 years 8 months 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.

  • Posts: 6
  • Thank you received: 0
3 years 6 months ago #324856

Hi, Philip!

I'm struggling with same problem right now. I think that good workaround cloud be change of html output from

<label>
    <input type="radio">
VARIANT OPTION
</label>
to
<div>
<label>VARIANT OPTION</label>
<input type="radio">
</div>

and adding just this CSS line:
input[type="radio"]:checked+label {
 font-weight: bold; 
}

Is there way to change this part of output via 'views' editor? I tried to trace where this output generates but unfortunately unsuccessfully. Please let me know if this presumption could work.

BR,
Arturs

Last edit: 3 years 6 months ago by kaurovs.

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

  • Posts: 4509
  • Thank you received: 611
  • MODERATOR
3 years 6 months ago #324870

Hello,

In order to better understand the context, and mostly better answer you can you provide an Url in order to see the page.
And little tips, you have a specific option to guide you to find HikaShop View , from Main HikaShop Configuration and go to Advanced tab, then first part "Advanced settings", active your "Display view files" option on "Front"



Awaiting news from you to progress on your subject.
Regards

Last edit: 3 years 6 months ago by Philip.

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

  • Posts: 6
  • Thank you received: 0
3 years 6 months ago #324904

Hi,

thanks for showing 'Display view files' feature. This leads me to show_block_characteristic.php. Now I'm stuck again because code there is to complex for me.

Here is url to product.
vaidava.lv/lv/davanu-karte

This will be a gift card. The thing that I want to do is to change style of selected value of gift card.

BR,
Arturs

Last edit: 3 years 6 months ago by kaurovs.

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

  • Posts: 4509
  • Thank you received: 611
  • MODERATOR
3 years 6 months ago #324910

Hello,

We will need more elements to better understand what do you mean by "I'm stuck again because code there is to complex for me".
In order to be clear, the HikaShop team can guide you but we have to understand where is your current issue.

From what we know, you have now to add some javascript (and not necessarily in the "sub-view" show_block_characteristic) in the main show_default page, you can add through <script></script> a code that will add & remove a class link to some css.

Here is for the method, but awaiting more elements from you to better guide you.
Regards

Last edit: 3 years 6 months ago by Philip.

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

Time to create page: 0.094 seconds
Powered by Kunena Forum