jQuery TextArea 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 jqxTextArea.

jqx-text-area - applied to the widget.
jqx-panel - applied to the widget.
jqx-widget - applied to the widget and its pop-up.
jqx-widget-content - applied to the widget, its inner textarea and the pop-up.
jqx-rc-all - applied to the widget, its pop-up and the pop-up items if the property roundedCorners is set to true. Adds rounded corners to the widget.
jqx-text-area-element - applied to the widget's inner textarea.
jqx-text-area-element-rtl - applied to the widget's inner textarea if the property rtl is set to true.
jqx-fill-state-disabled - applied to the widget when it is disabled.
jqx-fill-state-focus - applied to the widget's inner textarea when it is focused.
jqx-fill-state-pressed - applied to the selected item in the widget's pop-up.
jqx-popup - applied to the widget's pop-up.
jqx-input-popup - applied to the widget's pop-up.
jqx-menu - applied to the widget's pop-up.
jqx-menu-vertical - applied to the widget's pop-up.
jqx-menu-dropdown - applied to the widget's pop-up.
jqx-menu-item - applied to the widget's pop-up items.
jqx-item - applied to the widget's pop-up items.

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

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

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

<script type="text/javascript">
    $(document).ready(function () {
        $('#jqxTextArea').jqxTextArea({ theme: 'summer', width: 250, height: 100, placeHolder: 'Enter a sentence...' });
    });
</script>

The sample below demonstrates how to set the 'summer' theme to jqxTextArea.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery TextArea 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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtextarea.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxTextArea').jqxTextArea({ theme: 'summer', width: 250, height: 100, placeHolder: 'Enter a sentence...' });
            $('#jqxTextArea').jqxTextArea('val', 'jQWidgets is a comprehensive and innovative widget library built on top of the jQuery JavaScript Library. It empowers developers to deliver professional, cross-browser compatible web applications, while significantly minimizing their development time. jQWidgets contains more than 60 UI widgets and is one of the fastest growing JavaScript UI frameworks on the Web.');
        });
    </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>
    <textarea id="jqxTextArea"></textarea>
</body>
</html>