Profile: a.R

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.