Good way to add classes to form input and label elements directly?

bfarkas

Trying to do some advanced styling, i.e. turn a checkbox into a switch like element which is supported in the foundation framework but relies on adding classes to the input/label elements directly.
I don;t see a way to do this in the current setup of editor unless I am overlooking something?

allan

You can get the input element using field().input() and modify it from there. That means you need to do it after the form has been initialised.

If you want to do it globally, the way to do it would be with a field type plug-in.

Allan

bfarkas

Thanks, I think I ended up at a similar route, but just regular javascript and DOM elements:

p200editor.on( 'open', function ( action ) {
        var labelMessage = '<span class="switch-active" aria-hidden="true">Full</span><span class="switch-inactive" aria-hidden="true">Simple</span>'
        document.getElementById('DTE_Field_mode_0').parentNode.children[0].className = 'switch-input';
        document.getElementById('DTE_Field_mode_0').parentNode.children[1].className = 'switch-paddle';
        document.getElementById('DTE_Field_mode_0').parentNode.children[1].innerHTML = labelMessage
});

This added a class to the input, a class to the label, and added content into the label area.