Problem:
The customer wants to place the label behind the input in the search form to manipulate the label based on the input status using CSS. However, the input is currently placed inside the label, making this manipulation difficult.
Solution:
I confirmed that the customer is using legacy views to create the search form.
I checked internally and found that it is not possible to separate the label from the input using shortcodes in legacy views.
As a workaround, I suggested using JavaScript to manipulate the label based on the checkbox's checked status. Here is an example code snippet:
jQuery(function($){ $(".class_containing_your_checkbox input[type='checkbox']").change(function(event){ var checkbox = $(event.target); var status = checkbox.prop('checked'); if (status) checkbox.parent().css('background-color', '#569cc3'); else checkbox.parent().css('background-color', ''); }); });
The code above applies CSS rules based on whether the checkbox is selected or not. The customer needs to change the function to target the specific div class containing the checkbox and apply the desired CSS for the labels.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
- | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | - |
- | 13:00 – 18:00 | 13:00 – 18:00 | 13:00 – 18:00 | 13:00 – 18:00 | 13:00 – 18:00 | - |
Supporter timezone: America/Sao_Paulo (GMT-03:00)
This topic contains 5 replies, has 2 voices.
Last updated by 5 months, 3 weeks ago.
Assisted by: Mateus Getulio.