jQuery Masked Input CSS Styling and Appearance

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxMaskedInput.

jqx-widget - applied to the input.
jqx-input - applied to the input.
jqx-input-invalid - applied to the input when the validation fails.
jqx-input-content - applied to the input's content.
jqx-widget-content - applied to the input's content.
jqx-input-disabled - applied to the input when it is disabled.
jqx-fill-state-focus - applied to the widget when it is focused.
jqx-fill-state-disabled - applied to the widget when it is disabled.

When you create a custom style with colors and backgrounds for jqxMaskedInput, you need to do the following:

Add the above CSS classes related to jqxMaskedInput
After each CSS class, add your theme name.
For example:
jqx-input-summer

To apply your custom style to jqxMaskedInput, you need to set its 'theme' property(option) to point to your theme name string.

<script type="text/javascript">
    $(document).ready(function () {
        // Create jqxMaskedInput
        $("#jqxmaskedinput").jqxMaskedInput({ width: '250px', height: '25px', theme: 'summer', mask: '(###)###-####' });
    });
</script>

The sample below demonstrates how to set the 'Summer' theme to jqxMaskedInput.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery Masked Input CSS Styling Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxMaskedInput
            $("#jqxmaskedinput").jqxMaskedInput({ width: '250px', height: '25px', theme: 'summer', mask: '(###)###-####' });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div>
        Phone Number</div>
    <div id='jqxmaskedinput'>
    </div>
</body>
</html>