Customize the look

The field keeps your theme's input styling. Only the country button and the dropdown come from the plugin, and both follow your theme's light or dark mode automatically.

CSS variables#

Add these to Appearance → Customize → Additional CSS, or to your theme or child theme:

.dxp, .dxp-panel {
  --dxp-accent: #7f54b3;        /* focus ring and selection — WooCommerce purple */
  --dxp-panel-radius: 8px;
  --dxp-panel-font-size: 14px;
  --dxp-option-height: 36px;
  --dxp-flag-width: 20px;
}

/* The divider between the country button and the number */
.dxp--overlay .dxp-country { border-inline-end-color: #ddd; }

The full list of variables is in the Phone Input styling guide.

Your own classes#

Add classes to every part of the widget with the devix_phone_field_config filter. This is useful when your theme uses Tailwind or Bootstrap utilities:

add_filter( 'devix_phone_field_config', function ( array $config ) {
    $config['options']['classNames'] = array(
        'panel'  => 'shadow-lg rounded-lg',
        'option' => 'text-sm',
    );
    return $config;
} );

Parts: root, button, flag, dial, input, panel, search, list, option and empty.

Dark themes#

With Appearance → Match my theme automatically, the dropdown turns dark on dark themes. It looks for a dark class or data-theme="dark" on the page, and otherwise at the actual background behind the field. Choose Light or Dark in the settings to force either.

Flags and dial code#

• SVG flags look identical everywhere. Emoji flags use the visitor's system font, and Windows shows them as two letters. No flags shows the dial code only.
• Dial code on the button keeps +971 outside the text. Turn it off to type the code in the field.