Checkbox Custom Style

This topic has 2 replies, 2 voices, and was last updated 2 years, 3 months ago by Graceson.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts

September 1, 2022 at 12:16 AM #38148

Participant

Hello,

I am trying to make a checkbox with a custom style. CSS can't be used to style inputs, so this required making my own checkbox and then styling it to match. Currently, the HTML structure for the checkbox field appears to be:

<div class="rwmb-field rwmb-checkbox-wrapper required">
   <div class="rwmb-label">
     <label for="ID">ID<span class="rwmb-required">*</span></label>
   </div>

   <div class="rwmb-input">
     <label id="ID_description" class="description">
     <input value="1" type="checkbox" required="1" id="ID" class="rwmb-checkbox" name="ID">
     Some_text_here.
     </label>
   </div>
</div>

However, to add in a custom checkbox the structure I am using is:

<div class="rwmb-field rwmb-checkbox-wrapper  required">
    <div class="rwmb-label">
     <label for="ID">ID<span class="rwmb-required">*</span></label>
    </div>
    
    <div class="rwmb-input">
    <label id="subscribe_description" class="description">
      <input value="1" type="checkbox" required="1" id="ID" class="rwmb-checkbox" name="ID">
      <span class="checkmark">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"></path></svg>
      </span>
      <span>Some_text_here</span>
   </label>
  </div>
</div>

I can make this using this code for the description of the checkbox:
'desc' => __( "<span class=\"checkmark\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z\"></path></svg></span><span>" . settings_field_value("some_settings_field_ID") . "</span>", 'sitedomain' ),

However, this puts my svg checkmark everywhere, including in the admin view. I could hide it with some CSS, but I'd prefer to just build it correctly from the start.

Is there better way to handle this with Meta Box?

Thanks!

September 1, 2022 at 10:36 AM #38152

Long Nguyen

Moderator

Hi,

You can use the filter rwmb_{$field_id}_wrapper_html to add some HTML code to the field appearance. For example

add_filter( 'rwmb_checkbox_0eihjeboovwn_outer_html', function( $outer_html, $field, $value ) {
    $outer_html = $field['before'] . "<div class='{$field['class']}'>{$outer_html} - Some Text Here</div>" . $field['after'];
    return $outer_html;
}, 10, 3 );

Read more on the documentation https://docs.metabox.io/filters/rwmb-wrapper-html/

Or check the admin area before adding the description for the field. For example:

function your_prefix_function_name( $meta_boxes ) {
    $desc = '';
    if( !is_admin() ) {
        $desc = 'Field description';
    }
    
    $meta_boxes[] = [
        'title'  => __( 'My Custom Fields', 'your-text-domain' ),
        'id'     => 'my-custom-fields',
        'fields' => [
            [
                'name' => __( 'Checkbox', 'your-text-domain' ),
                'id'   => 'checkbox_0eihjeboovwn',
                'type' => 'checkbox',
                'desc' => $desc
            ],
        ],
    ];
    return $meta_boxes;
}

September 2, 2022 at 12:10 AM #38155

Graceson

Participant

Thanks Long! I think that filter was something I had seen at one point, but I couldn't find it again. I'll give that a shot, and otherwise your second solution seems very straight forward.

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.