Appearance and Styling

Theme

The CurrencyTextbox control’s style and appearance can be controlled based on CSS classes. In order to apply styles to the CurrencyTextbox control, refer to the files, ej.widgets.core.min.css and ej.theme.min.css. When the file ej.web.all.min.css is referred, then it is not necessary to include the files ej.widgets.core.min.css and ej.theme.min.css in your project, as ej.web.all.min.css is the combination of these two files.

By default, there are 17 themes available for the CurrencyTextbox control,

  • bootstrap
  • flat-azure
  • flat-azure-dark
  • fat-lime
  • flat-lime-dark
  • flat-saffron
  • flat-saffron-dark
  • gradient-azure
  • gradient-azure-dark
  • gradient-lime
  • gradient-lime-dark
  • gradient-saffron
  • gradient-saffron-dark
  • high-contrast-01
  • high-contrast-02
  • material
  • office-365

CSS Class

The CSS properties can be customized by using the CssClass in the CurrencyTextbox. You can customize the CurrencyTextbox with various CSS properties to appear as you desire.

Configure CSS Class

Add the following code to your ASPX page to render the CurrencyTextbox control with customized style.

  • html
  • <ej:CurrencyTextBox ID="currency"  cssClass="customCss" runat="server"> </ej:CurrencyTextBox>

    Customize the CSS properties in custom CSS class.

  • css
  • .customCss .e-box {
    
                border-color: #9d241b;
    
            }
    
            .customCss .e-input {
    
                background-color: #f6db8d;            
    
            }
    
            .customCss .e-select {
    
                background-color: #ecf6ac;
    
                border-color: #3c36e7;
    
            }

    The output after applying the CssClass.

    Rounded Corner Support

    The CurrencyTextbox provides rounded corner support that changes the appearance of the CurrencyTextbox control. The default value for ShowRoundedCorner property is false.

    Configure Rounded Corner Support

    Add the following code to your ASPX page to render the CurrencyTextbox control with rounded corners.

  • html
  • <ej:CurrencyTextBox ID="currency"   Value="3" ShowRoundedCorner="true" runat="server"></ej:CurrencyTextBox>

    The output when the ShowRoundedCorner is set to true.