UI Widgets CSS Classes

This section describes the DevExtreme CSS classes you can use to define the appearance of an element.

dx-clearfix

Set this class to an element to automatically increase the height of this element if floating child elements overflow the current element box.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="dx-fieldset">
        <div class="dx-field" style="text-align:center;">
            Apply <b>"dx-clearfix"</b> class to parent element<br />
            <div ng-model="applyClass" dx-switch="{ onValueChanged: changeValue }"></div>
        </div>
    </div>
    <div id="parentElement">
        <div id="childElement"><p>Floating child element.</p></div>
        <p>Parent element</p>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.applyClass = false;
    $scope.changeValue = function (e) {
        if (e.value)
            $("#parentElement").addClass("dx-clearfix");
        else
            $("#parentElement").removeClass("dx-clearfix");
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
p{
    margin:10px;
}
#parentElement {
    color:blue;
    margin: 10px;
    background-color: cyan;
    border:solid 2px blue;
}
#childElement {
    margin: 10px;
    float: left;
    width: 30%;
    color:brown;
    background-color: yellow;
    border:solid 2px brown;
}
<div class="dx-fieldset">
    <div class="dx-field" style="text-align:center;">
        Apply <b>"dx-clearfix"</b> class to parent element<br />
        <div data-bind="dxSwitch: { value: applyClass, onValueChanged: changeValue }"></div>
    </div>
</div>
<div id="parentElement">
    <div id="childElement"><p>Floating child element.</p></div>
    <p>Parent element</p>
</div>
applyClass = ko.observable(false);
changeValue = function (e) {
    if (e.value)
        $("#parentElement").addClass("dx-clearfix");
    else
        $("#parentElement").removeClass("dx-clearfix");
};
p{
    margin:10px;
}
#parentElement {
    color:blue;
    margin: 10px;
    background-color: cyan;
    border:solid 2px blue;
}
#childElement {
    margin: 10px;
    float: left;
    width: 30%;
    color:brown;
    background-color: yellow;
    border:solid 2px brown;
}
<div class="dx-fieldset">
    <div class="dx-field" style="text-align:center;">
        Apply <b>"dx-clearfix"</b> class to parent element<br />
        <div id="classSelector"></div>
    </div>
</div>
<div id="parentElement">
    <div id="childElement"><p>Floating child element.</p></div>
    <p>Parent element</p>
</div>
$(function () {
    $("#classSelector").dxSwitch({
        value: false,
        onValueChanged: function (e) {
            if (e.value)
                $("#parentElement").addClass("dx-clearfix");
            else
                $("#parentElement").removeClass("dx-clearfix");
        }
    });
});
p{
    margin:10px;
}
#parentElement {
    color:blue;
    margin: 10px;
    background-color: cyan;
    border:solid 2px blue;
}
#childElement {
    margin: 10px;
    float: left;
    width: 30%;
    color:brown;
    background-color: yellow;
    border:solid 2px brown;
}

dx-field

Defines the appearance of an element displaying a field-value pair within a dx-fieldset element.

The dx-field field element may include label and value elements intended to display the field name and value respectively. Use the dx-field-label, dx-field-value and dx-field-value-static classes to create label and value elements.

HTML
<div class="dx-field">
    <div class="dx-field-label">Full Name</div>
    <div class="dx-field-value-static">John Smith</div>
</div>

DevExtreme UI widgets include WAI-ARIA markup to support screen readers. If you use a widget within a field value element, associate the widget with the field label to allow a screen reader to properly read the field. For this purpose, specify a unique ID for the field label element and assign this ID to the aria-labeledby attribute of the associated widget as demonstrated below.

HTML
<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" id="fullNameTextBox"></div>
    </div>
</div>
AngularJS Approach
HTML
<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" dx-text-box="{ value: fullName }"></div>
    </div>
</div>
Knockout Approach
HTML
<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" data-bind="dxTextBox: { value: fullName }"></div>
    </div>
</div>
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">First Name</div>
            <div class="dx-field-value" ng-model="firstName" dx-text-box="{}">
            </div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">Last Name</div>
            <div class="dx-field-value" ng-model="lastName" dx-text-box="{}" ">
            </div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">Full Name</div>
            <div class="dx-field-value-static">
                <span>{{firstName}} {{lastName}}</span>
            </div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.firstName = 'John';
    $scope.lastName = 'Smith';
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">First Name</div>
        <div class="dx-field-value" data-bind="dxTextBox: {value: firstName}">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Last Name</div>
        <div class="dx-field-value" data-bind="dxTextBox: { value: lastName }">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Full Name</div>
        <div class="dx-field-value-static">
            <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
        </div>
    </div>
</div>
firstName = ko.observable("John");
lastName = ko.observable("Smith");
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">First Name</div>
        <div class="dx-field-value" id="firstNameTextBox">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Last Name</div>
        <div class="dx-field-value" id="lastNameTextBox">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Full Name</div>
        <div class="dx-field-value-static">
            <span id="firstName">John</span> <span id="lastName">Smith</span>
        </div>
    </div>
</div>

$(function () {
    $("#firstNameTextBox").dxTextBox({
        value: 'John',
        onValueChanged: function (e) {
            $("#firstName").text(e.value);
        }
    });
    $("#lastNameTextBox").dxTextBox({
        value: 'Smith',
        onValueChanged: function (e) {
            $("#lastName").text(e.value);
        }
    });
});

dx-field-label

A class used to display a field name within the dx-field element.

HTML
<div class="dx-field">
    <div class="dx-field-label">Full Name</div>
    <div class="dx-field-value">John Smith</div>
</div>

The dx-field-label element can hold plain text, UI widgets, knockout bindings or custom markup.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">First Name</div>
            <div class="dx-field-value" ng-model="firstName" dx-text-box="{}">
            </div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">Last Name</div>
            <div class="dx-field-value" ng-model="lastName" dx-text-box="{}" ">
            </div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">Full Name</div>
            <div class="dx-field-value-static">
                <span>{{firstName}} {{lastName}}</span>
            </div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.firstName = 'John';
    $scope.lastName = 'Smith';
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">First Name</div>
        <div class="dx-field-value" data-bind="dxTextBox: {value: firstName}">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Last Name</div>
        <div class="dx-field-value" data-bind="dxTextBox: { value: lastName }">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Full Name</div>
        <div class="dx-field-value-static">
            <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
        </div>
    </div>
</div>
firstName = ko.observable("John");
lastName = ko.observable("Smith");
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">First Name</div>
        <div class="dx-field-value" id="firstNameTextBox">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Last Name</div>
        <div class="dx-field-value" id="lastNameTextBox">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Full Name</div>
        <div class="dx-field-value-static">
            <span id="firstName">John</span> <span id="lastName">Smith</span>
        </div>
    </div>
</div>

$(function () {
    $("#firstNameTextBox").dxTextBox({
        value: 'John',
        onValueChanged: function (e) {
            $("#firstName").text(e.value);
        }
    });
    $("#lastNameTextBox").dxTextBox({
        value: 'Smith',
        onValueChanged: function (e) {
            $("#lastName").text(e.value);
        }
    });
});

dx-fieldset

Defines the appearance of an element displaying a list of field-value pairs.

To create a fieldset element, create an element and assign "dx-fieldset" to its class attribute.

HTML
<div class="dx-fieldset">
    . . .
</div>

Each fieldset item is displayed within a separate field element, which has the dx-field class. The field element may include label and value elements intended to display the field name and value respectively. Use the dx-field-label, dx-field-value and dx-field-value-static classes to create label and value elements.

HTML
<div class="dx-field">
    <div class="dx-field-label">Full Name</div>
    <div class="dx-field-value-static">John Smith</div>
</div>

The field label and value elements can hold plain text, UI widgets, knockout bindings or custom markup.

DevExtreme UI widgets include WAI-ARIA markup to support screen readers. If you use a widget within a field value element, associate the widget with the field label to allow a screen reader to properly read the field. For this purpose, specify a unique ID for the field label element and assign this ID to the aria-labeledby attribute of the associated widget as demonstrated below.

HTML
<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" id="fullNameTextBox"></div>
    </div>
</div>
AngularJS Approach
HTML
<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" dx-text-box="{ value: fullName }"></div>
    </div>
</div>
Knockout Approach
HTML
<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" data-bind="dxTextBox: { value: fullName }"></div>
    </div>
</div>

View Demo

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">First Name</div>
            <div class="dx-field-value" ng-model="firstName" dx-text-box="{}">
            </div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">Last Name</div>
            <div class="dx-field-value" ng-model="lastName" dx-text-box="{}" ">
            </div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">Full Name</div>
            <div class="dx-field-value-static">
                <span>{{firstName}} {{lastName}}</span>
            </div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.firstName = 'John';
    $scope.lastName = 'Smith';
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">First Name</div>
        <div class="dx-field-value" data-bind="dxTextBox: {value: firstName}">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Last Name</div>
        <div class="dx-field-value" data-bind="dxTextBox: { value: lastName }">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Full Name</div>
        <div class="dx-field-value-static">
            <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
        </div>
    </div>
</div>
firstName = ko.observable("John");
lastName = ko.observable("Smith");
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">First Name</div>
        <div class="dx-field-value" id="firstNameTextBox">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Last Name</div>
        <div class="dx-field-value" id="lastNameTextBox">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Full Name</div>
        <div class="dx-field-value-static">
            <span id="firstName">John</span> <span id="lastName">Smith</span>
        </div>
    </div>
</div>

$(function () {
    $("#firstNameTextBox").dxTextBox({
        value: 'John',
        onValueChanged: function (e) {
            $("#firstName").text(e.value);
        }
    });
    $("#lastNameTextBox").dxTextBox({
        value: 'Smith',
        onValueChanged: function (e) {
            $("#lastName").text(e.value);
        }
    });
});

dx-fieldset-header

A class used to display header of a dx-fieldset element.

HTML
<div class="dx-fieldset">
    <div class="dx-fieldset-header">Personal Data</div>
    <div class="dx-field">
        <div class="dx-field-label">Full Name</div>
        <div class="dx-field-value-static">John Smith</div>
    </div>
</div>

The dx-fieldset-header element can hold plain text, UI widgets, knockout bindings or custom markup.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="dx-fieldset">
        <div class="dx-fieldset-header">Personal Data</div>
        <div class="dx-field">
            <div class="dx-field-label">First Name</div>
            <div class="dx-field-value" ng-model="firstName" dx-text-box="{}">
            </div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">Last Name</div>
            <div class="dx-field-value" ng-model="lastName" dx-text-box="{}" ">
            </div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">Full Name</div>
            <div class="dx-field-value-static">
                <span>{{firstName}} {{lastName}}</span>
            </div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.firstName = 'John';
    $scope.lastName = 'Smith';
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
<div class="dx-fieldset">
    <div class="dx-fieldset-header">Personal Data</div>
    <div class="dx-field">
        <div class="dx-field-label">First Name</div>
        <div class="dx-field-value" data-bind="dxTextBox: {value: firstName}">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Last Name</div>
        <div class="dx-field-value" data-bind="dxTextBox: { value: lastName }">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Full Name</div>
        <div class="dx-field-value-static">
            <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
        </div>
    </div>
</div>
firstName = ko.observable("John");
lastName = ko.observable("Smith");
<div class="dx-fieldset">
    <div class="dx-fieldset-header">Personal Data</div>
    <div class="dx-field">
        <div class="dx-field-label">First Name</div>
        <div class="dx-field-value" id="firstNameTextBox">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Last Name</div>
        <div class="dx-field-value" id="lastNameTextBox">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Full Name</div>
        <div class="dx-field-value-static">
            <span id="firstName">John</span> <span id="lastName">Smith</span>
        </div>
    </div>
</div>

$(function () {
    $("#firstNameTextBox").dxTextBox({
        value: 'John',
        onValueChanged: function (e) {
            $("#firstName").text(e.value);
        }
    });
    $("#lastNameTextBox").dxTextBox({
        value: 'Smith',
        onValueChanged: function (e) {
            $("#lastName").text(e.value);
        }
    });
});

dx-field-value

A class used to display a field value containing a widget within the dx-field element.

JavaScript
$("#nameTextBox").dxTextBox({
    value: "John"
});
HTML
<div class="dx-field">
    <div class="dx-field-label">Name</div>
    <div class="dx-field-value" id="nameTextBox"></div>
</div>
AngularJS Approach
JavaScript
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.name = "John";
});
HTML
<div class="dx-field">
    <div class="dx-field-label">Name</div>
    <div class="dx-field-value" dx-text-box="{ value: name }"></div>
</div>
Knockout Approach
JavaScript
var myViewModel = {
    name: ko.observable("John")
}
ko.applyBindings(myViewModel);
HTML
<div class="dx-field">
    <div class="dx-field-label">Name</div>
    <div class="dx-field-value" data-bind="dxTextBox: { value: name }"></div>
</div>

To display plain text, knockout bindings or custom markup within a field value element, use the dx-field-value-static CSS class.

DevExtreme UI widgets includes WAI-ARIA markup to support screen readers. If you use a widget within a field value element, associate the widget with the field label to allow a screen reader to properly read the field. For this purpose, specify a unique ID for the field label element and assign this ID to the aria-labeledby attribute of the associated widget as demonstrated below.

HTML
<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" id="fullNameTextBox"></div>
    </div>
</div>
AngularJS Approach
HTML
<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" dx-text-box="{ value: fullName }"></div>
    </div>
</div>
Knockout Approach
HTML
<div class="dx-field">
    <div class="dx-field-label" id="fullnameLabel">Full Name</div>
    <div class="dx-field-value">
        <div aria-labeledby="fullnameLabel" data-bind="dxTextBox: { value: fullName }"></div>
    </div>
</div>
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">First Name</div>
            <div class="dx-field-value" ng-model="firstName" dx-text-box="{}">
            </div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">Last Name</div>
            <div class="dx-field-value" ng-model="lastName" dx-text-box="{}" ">
            </div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.firstName = 'John';
    $scope.lastName = 'Smith';
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">First Name</div>
        <div class="dx-field-value" data-bind="dxTextBox: {value: firstName}">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Last Name</div>
        <div class="dx-field-value" data-bind="dxTextBox: { value: lastName }">
        </div>
    </div>
</div>
firstName = ko.observable("John");
lastName = ko.observable("Smith");
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">First Name</div>
        <div class="dx-field-value" id="firstNameTextBox">
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Last Name</div>
        <div class="dx-field-value" id="lastNameTextBox">
        </div>
    </div>
</div>

$(function () {
    $("#firstNameTextBox").dxTextBox({
        value: 'John'
    });
    $("#lastNameTextBox").dxTextBox({
        value: 'Smith'
    });
});

dx-field-value-static

A class used to display a field value containing a static text within the dx-field element.

HTML
<div class="dx-field">
    <div class=dx-field-label>Full Name</div>
    <div class=dx-field-value-static>John Smith</div>
</div>

The dx-field-value-static element can hold plain text, knockout bindings or custom markup. To display a UI widget within a field value element, use the dx-field-value CSS class.

Show Example:
jQuery
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Full Name</div>
        <div class="dx-field-value-static">John Smith</div>
    </div>
</div>

dx-icon-IconName

Use this class to add a custom icon to the style sheet used in your application.

The name of this class must include the real name of the icon. For instance, the "myicon" icon must be defined by the "dx-icon-myicon" class.

CSS
.dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/
  OVAAAARElEQVRYw+3WKQ4AIAADMPb/R4PHIDgTOr/ULUstZxPgfbAvBAgEAoFAIPAhcPebChAIHIKmDQgEAoFA4E/
  g7JcCrk4DW5xoAVzaKL0AAAAASUVORK5CYII=);
}

As you can see, the icon is added in the Base64 type in the code above. We recommend that you also use this type to reduce the number of requests and the amount of data transferred.

The icons that are added to the stylesheet via this class can be used for DevExtreme widgets like predefined icons from the built-in icon library.

CSS
<div class="button" data-bind="dxButton: { icon: 'myicon', text: 'Click me' }"></div>
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text:'Click me', icon: 'myicon' }"></div>
</div>


var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {

});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
  text-align: center;
}
.dx-button{
  margin: 20px;
}

.dx-theme-android5 .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAcElEQVRo3u3XIQ6AMAxA0fbQUzM1Uzv0sFgEYcD7uknzTJPmWiu+XAICAgICAgICAgK+FVhjXhk/L8uIiOoNEBAQEBAQEBAQEPA3wBrzsR+rektAQEcGEBAQEBAQEBAQEPB24O4BAgICAgICAgJu2wG3bCOgMHkN8wAAAABJRU5ErkJggg==);
}

.dx-theme-ios .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAQAAABtnpmgAAAAZUlEQVRo3u3SsQkAIAwEQDOw0ziwFhZiY6OixX0VCDwXSNT0ZwIMDAwMDAwMDAwMDAzsJKyMsVfFvM9gYGBgYGBgYCvG1h05wL6BeX4wMDAwMDCw27BbAQMDAwMDAwMDAwMDe5IGFJGKAcyLcs4AAAAASUVORK5CYII=);
}

.dx-theme-win10 .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/OVAAAARElEQVRYw+3WKQ4AIAADMPb/R4PHIDgTOr/ULUstZxPgfbAvBAgEAoFAIPAhcPebChAIHIKmDQgEAoFA4E/g7JcCrk4DW5xoAVzaKL0AAAAASUVORK5CYII=);
}

.dx-theme-generic .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAcElEQVRo3u3XIQ6AMAxA0fbQUzM1Uzv0sFgEYcD7uknzTJPmWiu+XAICAgICAgICAgK+FVhjXhk/L8uIiOoNEBAQEBAQEBAQEPA3wBrzsR+rektAQEcGEBAQEBAQEBAQEPB24O4BAgICAgICAgJu2wG3bCOgMHkN8wAAAABJRU5ErkJggg==);
}
<div data-bind="dxButton: { text: 'Click me', icon: 'myicon' }"></div>


body{
  text-align: center;
}
.dx-button{
  margin: 20px;
}

.dx-theme-android5 .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAcElEQVRo3u3XIQ6AMAxA0fbQUzM1Uzv0sFgEYcD7uknzTJPmWiu+XAICAgICAgICAgK+FVhjXhk/L8uIiOoNEBAQEBAQEBAQEPA3wBrzsR+rektAQEcGEBAQEBAQEBAQEPB24O4BAgICAgICAgJu2wG3bCOgMHkN8wAAAABJRU5ErkJggg==);
}

.dx-theme-ios .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAQAAABtnpmgAAAAZUlEQVRo3u3SsQkAIAwEQDOw0ziwFhZiY6OixX0VCDwXSNT0ZwIMDAwMDAwMDAwMDAzsJKyMsVfFvM9gYGBgYGBgYCvG1h05wL6BeX4wMDAwMDCw27BbAQMDAwMDAwMDAwMDe5IGFJGKAcyLcs4AAAAASUVORK5CYII=);
}

.dx-theme-win10 .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/OVAAAARElEQVRYw+3WKQ4AIAADMPb/R4PHIDgTOr/ULUstZxPgfbAvBAgEAoFAIPAhcPebChAIHIKmDQgEAoFA4E/g7JcCrk4DW5xoAVzaKL0AAAAASUVORK5CYII=);
}

.dx-theme-generic .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAcElEQVRo3u3XIQ6AMAxA0fbQUzM1Uzv0sFgEYcD7uknzTJPmWiu+XAICAgICAgICAgK+FVhjXhk/L8uIiOoNEBAQEBAQEBAQEPA3wBrzsR+rektAQEcGEBAQEBAQEBAQEPB24O4BAgICAgICAgJu2wG3bCOgMHkN8wAAAABJRU5ErkJggg==);
}
<div id="myButton"></div>


$(function () {
    $("#myButton").dxButton({
        text: 'Click me',
        icon: 'myicon'
    });
});
body{
  text-align: center;
}
.dx-button{
  margin: 20px;
}

.dx-theme-android5 .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAcElEQVRo3u3XIQ6AMAxA0fbQUzM1Uzv0sFgEYcD7uknzTJPmWiu+XAICAgICAgICAgK+FVhjXhk/L8uIiOoNEBAQEBAQEBAQEPA3wBrzsR+rektAQEcGEBAQEBAQEBAQEPB24O4BAgICAgICAgJu2wG3bCOgMHkN8wAAAABJRU5ErkJggg==);
}

.dx-theme-ios .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAQAAABtnpmgAAAAZUlEQVRo3u3SsQkAIAwEQDOw0ziwFhZiY6OixX0VCDwXSNT0ZwIMDAwMDAwMDAwMDAzsJKyMsVfFvM9gYGBgYGBgYCvG1h05wL6BeX4wMDAwMDCw27BbAQMDAwMDAwMDAwMDe5IGFJGKAcyLcs4AAAAASUVORK5CYII=);
}

.dx-theme-win10 .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/OVAAAARElEQVRYw+3WKQ4AIAADMPb/R4PHIDgTOr/ULUstZxPgfbAvBAgEAoFAIPAhcPebChAIHIKmDQgEAoFA4E/g7JcCrk4DW5xoAVzaKL0AAAAASUVORK5CYII=);
}

.dx-theme-generic .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAcElEQVRo3u3XIQ6AMAxA0fbQUzM1Uzv0sFgEYcD7uknzTJPmWiu+XAICAgICAgICAgK+FVhjXhk/L8uIiOoNEBAQEBAQEBAQEPA3wBrzsR+rektAQEcGEBAQEBAQEBAQEPB24O4BAgICAgICAgJu2wG3bCOgMHkN8wAAAABJRU5ErkJggg==);
}

dx-state-active

This class is applied to a widget or widget element when it is touched or clicked.

You can specify a custom style for this class to override the default style.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="tileView" dx-tile-view="{
        dataSource: tileViewDataSource,
        itemMargin: 20,
        baseItemHeight: 130,
        baseItemWidth: 180
    }" dx-item-alias="itemObj">
        <div class="tile" data-options="dxTemplate:{name:'item'}">
            <p style="font-size:larger;"><b>{{itemObj.name}}</b></p>
            <img style="margin:5px;" ng-attr-src="{{getImagePath(itemObj.name)}}" />
            <p>Capital: <i>{{itemObj.capital}}</i></p>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.tileViewDataSource = new DevExpress.data.DataSource("/Content/data/states.txt");
    $scope.getImagePath = function (name) {
        return "/Content/images/doc/16_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.dx-state-active{
  border: solid 4px red;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
}
<div class="tileView" data-bind="dxTileView: {
    dataSource: tileViewDataSource,
    itemMargin: 20,
    baseItemHeight: 130,
    baseItemWidth: 180
}">
    <div class="tile" data-options="dxTemplate:{name:'item'}">
        <p style="font-size:larger;"><b data-bind="text: name"></b></p>
        <img style="margin:5px;" data-bind="attr: { src: getImagePath(name) }" />
        <p>Capital: <i data-bind="text: capital"></i></p>
    </div>
</div>
//An object passed to the dataSource configuration option of the tile view
tileViewDataSource = new DevExpress.data.DataSource("/Content/data/states.txt");

//Generates the path to the required image file
getImagePath = function (name) {
    return "/Content/images/doc/16_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};
.dx-state-active{
  border: solid 4px red;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
}
<div id="myTileView"></div>
var tileViewDataSource = new DevExpress.data.DataSource("/Content/data/states.txt");

var getImagePath = function (name) {
    return "/Content/images/doc/16_1/PhoneJS/flags/" + name.replace(" ", "") + ".gif";
};

$(function () {
    $("#myTileView").dxTileView({
        dataSource: tileViewDataSource,
        itemMargin: 20,
        baseItemHeight: 130,
        baseItemWidth: 180,
        itemTemplate: function (itemData, itemIndex, itemElement) {
            itemElement.addClass("tile");
            itemElement.append('<p style="font-size:larger;"><b>' + itemData.name + '</b></p>');
            itemElement.append('<img style="margin: 5px;" src="' + getImagePath(itemData.name) + '"/>');
            itemElement.append('<p>Capital: <i>' + itemData.capital + '</i></p>');
        }
    });
});
.dx-state-active{
  border: solid 4px red;
}
.tile {
  border-radius: .5em;
  text-align: center;
  color: white;
  background: gray;
}

dx-state-disabled

Set this class to a widget element to disable the widget.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="dx-fieldset">
        <div class="dx-field" style="text-align:center;">
            Apply <b>"dx-state-disabled"</b> class to the button element<br />
            <div ng-model="applyClass" dx-switch="{ onValueChanged:changeValue }"></div>
        </div>
    </div>
    <div id="myButton" dx-button="{ text:'Click me' }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.applyClass = false;
    $scope.changeValue = function (e) {
        if (e.value)
            $("#myButton").addClass("dx-state-disabled");
        else
            $("#myButton").removeClass("dx-state-disabled");
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}
<div class="dx-fieldset">
    <div class="dx-field" style="text-align:center;">
        Apply <b>"dx-state-disabled"</b> class to the button element<br />
        <div data-bind="dxSwitch: { value: applyClass, onValueChanged:changeValue }"></div>
    </div>
</div>
<div id="myButton" data-bind="dxButton: { text:'Click me' }"></div>
applyClass = ko.observable(false);
changeValue = function (e) {
    if (e.value)
        $("#myButton").addClass("dx-state-disabled");
    else
        $("#myButton").removeClass("dx-state-disabled");
};
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}
<div class="dx-fieldset">
    <div class="dx-field" style="text-align:center;">
        Apply <b>"dx-state-disabled"</b> class to the button element<br />
        <div id="classSelector"></div>
    </div>
</div>
<div id="myButton"></div>
$(function () {
    $("#classSelector").dxSwitch({
        value: false,
        onValueChanged: function (e) {
            if (e.value)
                $("#myButton").addClass("dx-state-disabled");
            else
                $("#myButton").removeClass("dx-state-disabled");
        }
    });
    $("#myButton").dxButton({
        text: 'Click me'
    });
});
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}

dx-state-focused

This class is applied to a widget or widget element when it is focused.

You can specify a custom style for this class to override the default style.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="dx-fieldset">
        <div class="dx-field" style="text-align:center;">
            Apply <b>"dx-state-focused"</b> class to the button element<br />
            <div ng-model="applyClass" dx-switch="{ onValueChanged:changeValue }"></div>
        </div>
    </div>
    <div id="myButton" dx-button="{ text:'Click me' }"></div>
</div>

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.applyClass = false;
    $scope.changeValue = function (e) {
        if (e.value)
            $("#myButton").addClass("dx-state-focused");
        else
            $("#myButton").removeClass("dx-state-focused");
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}
<div class="dx-fieldset">
    <div class="dx-field" style="text-align:center;">
        Apply <b>"dx-state-focused"</b> class to the button element<br />
        <div data-bind="dxSwitch: { value: applyClass, onValueChanged:changeValue }"></div>
    </div>
</div>
<div id="myButton" data-bind="dxButton: { text:'Click me' }"></div>

applyClass = ko.observable(false);
changeValue = function (e) {
    if (e.value)
        $("#myButton").addClass("dx-state-focused");
    else
        $("#myButton").removeClass("dx-state-focused");
};
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}
<div class="dx-fieldset">
    <div class="dx-field" style="text-align:center;">
        Apply <b>"dx-state-focused"</b> class to the button element<br />
        <div id="classSelector"></div>
    </div>
</div>
<div id="myButton"></div>

$(function () {
    $("#classSelector").dxSwitch({
        value: false,
        onValueChanged: function (e) {
            if (e.value)
                $("#myButton").addClass("dx-state-focused");
            else
                $("#myButton").removeClass("dx-state-focused");
        }
    });
    $("#myButton").dxButton({
        text: 'Click me'
    });
});
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}

dx-state-hover

This class is applied to a widget or widget element when the mouse pointer is over it.

You can specify a custom style for this class to override the default style.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="dx-fieldset">
        <div class="dx-field" style="text-align:center;">
            Apply <b>"dx-state-hover"</b> class to the button element<br />
            <div ng-model="applyClass" dx-switch="{ onValueChanged:changeValue }"></div>
        </div>
    </div>
    <div id="myButton" dx-button="{ text:'Click me' }"></div>
</div>

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.applyClass = false;
    $scope.changeValue = function (e) {
        if (e.value)
            $("#myButton").addClass("dx-state-hover");
        else
            $("#myButton").removeClass("dx-state-hover");
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}
<div class="dx-fieldset">
    <div class="dx-field" style="text-align:center;">
        Apply <b>"dx-state-hover"</b> class to the button element<br />
        <div data-bind="dxSwitch: { value: applyClass, onValueChanged:changeValue }"></div>
    </div>
</div>
<div id="myButton" data-bind="dxButton: { text:'Click me' }"></div>

applyClass = ko.observable(false);
changeValue = function (e) {
    if (e.value)
        $("#myButton").addClass("dx-state-hover");
    else
        $("#myButton").removeClass("dx-state-hover");
};
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}
<div class="dx-fieldset">
    <div class="dx-field" style="text-align:center;">
        Apply <b>"dx-state-hover"</b> class to the button element<br />
        <div id="classSelector"></div>
    </div>
</div>
<div id="myButton"></div>

$(function () {
    $("#classSelector").dxSwitch({
        value: false,
        onValueChanged: function (e) {
            if (e.value)
                $("#myButton").addClass("dx-state-hover");
            else
                $("#myButton").removeClass("dx-state-hover");
        }
    });
    $("#myButton").dxButton({
        text: 'Click me'
    });
});
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}

dx-state-invisible

Set this class to a widget element to hide the widget.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="dx-fieldset">
        <div class="dx-field" style="text-align:center;">
            Apply <b>"dx-state-invisible"</b> class to the button element<br />
            <div ng-model="applyClass" dx-switch="{ onValueChanged:changeValue }"></div>
        </div>
    </div>
    <div id="myButton" dx-button="{ text:'Click me' }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.applyClass = false;
    $scope.changeValue = function (e) {
        if (e.value)
            $("#myButton").addClass("dx-state-invisible");
        else
            $("#myButton").removeClass("dx-state-invisible");
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}
<div class="dx-fieldset">
    <div class="dx-field" style="text-align:center;">
        Apply <b>"dx-state-invisible"</b> class to the button element<br />
        <div data-bind="dxSwitch: { value: applyClass, onValueChanged:changeValue }"></div>
    </div>
</div>
<div id="myButton" data-bind="dxButton: { text:'Click me' }"></div>
applyClass = ko.observable(false);
changeValue = function (e) {
    if (e.value)
        $("#myButton").addClass("dx-state-invisible");
    else
        $("#myButton").removeClass("dx-state-invisible");
};
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}
<div class="dx-fieldset">
    <div class="dx-field" style="text-align:center;">
        Apply <b>"dx-state-invisible"</b> class to the button element<br />
        <div id="classSelector"></div>
    </div>
</div>
<div id="myButton"></div>
$(function () {
    $("#classSelector").dxSwitch({
        value: false,
        onValueChanged: function (e) {
            if (e.value)
                $("#myButton").addClass("dx-state-invisible");
            else
                $("#myButton").removeClass("dx-state-invisible");
        }
    });
    $("#myButton").dxButton({
        text: 'Click me'
    });
});
body{
    text-align:center;
}
#myButton{
    margin: 10px;
}

dx-translate-disabled

Set this class to a widget element to disable translating the widget text to a local language.

dx-user-select

Set this class to a <span> element to enable a user to select the text contained in this element.

HTML
<p>You can select <span class="dx-user-select">this text</span>.</p>