MaskedTextBox Appearance

As of the R1 2022 release, the MaskedTextBox component uses a new rendering. To learn more about why we decided to create a new rendering for our components, see the Components Rendering Overview article.

For a live example of the styling options of the MaskedTextBox, visit the Appearance Demo of the MaskedTextBox.

Options

The MaskedTextBox supports the following styling options:

• Size—configures the overall size of the component.
• Rounded—configures the border radius of the component.
• FillMode—configures how the color is applied to the component.

Size

The Size option controls the size of the MaskedTextBox. The k-input-{size} class, which is applied to the wrapping span element of the MaskedTextBox, reflects the value of the Size option.

The following values are available for the Size option:

• Small—small size (applies the k-input-sm class to the wrapping span element)
• Medium—medium size (applies the k-input-md class to the wrapping span element)
• Large—large size (applies the k-input-lg class to the wrapping span element)
• None—unset.

The following example demonstrates how to set Size in the declaration of the MaskedTextBox:

  @(Html.Kendo().MaskedTextBox()
    .Name("maskedtextbox")
    .Mask("[phone]")
    .Size(ComponentSize.Large)
  )

The default size value is Medium.

<span class="k-maskedtextbox k-input k-input-md">
</span>

Rounded

The Rounded option controls the border radius of the MaskedTextBox. The class that corresponds to the Rounded option is k-rounded-{rounded}.

The following values are available for the Rounded option:

• Small—small border radius (applies the k-rounded-sm class to the wrapping span element)
• Medium—medium border radius (applies the k-rounded-md class to the wrapping span element)
• Large—large border radius (applies the k-rounded-lg class to the wrapping span element)
• Full—largest border radius (applies the k-rounded-full class to the wrapping span element)
• None—unset.

The following example demonstrates how to set Rounded in the declaration of the MaskedTextBox:

  @(Html.Kendo().MaskedTextBox()
    .Name("maskedtextbox")
    .Mask("[phone]")
    .Rounded(Rounded.Large)
  )

The default rounded value is Medium.

<span class="k-maskedtextbox k-input k-rounded-md">
</span>

FillMode

The FillMode option controls the way color is applied to the rendered MaskedTextBox. The k-input-{fillMode} class, which is applied to the wrapping span element of the MaskedTextBox, reflects the value of the FillMode option.

The following values are available for the FillMode option:

• Solid—applies the k-input-solid class to the wrapping span element
• Flat—applies the k-input-flat class to the wrapping span element
• Outline—applies the k-input-outline class to the wrapping span element
• None—unset.

The following example demonstrates how to set FillMode in the declaration of the MaskedTextBox:

  @(Html.Kendo().MaskedTextBox()
    .Name("maskedtextbox")
    .Mask("[phone]")
    .FillMode(FillMode.Outline)
  )

The default fillMode value is solid.

<span class="k-maskedtextbox k-input k-input-solid">
</span>

Old vs New Rendering

The old rendering of the component consisted of a wrapping span element that contained a child input element.

<span class="k-maskedtextbox">
    <input class="k-textbox" />
</span>

The new rendering of the component keeps the span element and the child input element, but changes the CSS classes that are applied to the two elements:

• The span element has the following classes:

  <span class="k-maskedtextbox k-input k-input-md k-rounded-md k-input-solid">
  </span>
  

• The input element has the k-input-inner class:

  <input type="text" class="k-input-inner" value="..." placeholder="..." />
  

The following example demonstrates how to configure the appearance of the component through configuration:

  @(Html.Kendo().MaskedTextBox()
    .Name("maskedtextbox")
    .Mask("[phone]")
    .Size(ComponentSize.Medium)
    .Rounded(Rounded.Medium)
    .FillMode(FillMode.Solid)
  )

The following HTML structure shows how the MaskedTextBox will render:

<span class="k-maskedtextbox k-input k-input-md k-rounded-md k-input-solid">
  <input type="text" class="k-input-inner" value="..." placeholder="..." />
</span>

Visual Backwards Compatibility

In order to achieve the same look and feel as the old rendering, make sure to use the classes available in the new rendering. Visit the CSS Classes Migration and JQuery Selectors Migration sections of the Appearance Overview article for additional information.

If you use a LESS theme, the new rendering will support only the default options.

Previously, a reference to the MaskedTextBox element was obtainable through the k-textbox class.

$(".k-textbox") // Returns a reference to the input element in the old rendering.

With the new rendering, the MaskedTextBox element must be targeted using the k-input-inner class.

$(".k-input-inner") // Returns a reference to the input element in the new rendering.

The following example showcases how to apply a background color to the MaskedTextBox in both the new, and the old rendering:

    <style>
      /* Doesn't work AFTER R1 2022 */
      .k-textbox {
        background-color: #0071bc !important; /* Blue color in versions BEFORE R1 2022 */
      }
      /* Doesn't work BEFORE R1 2022 */
      .k-input-inner {
        background-color: #2e8540 !important; /* Green color in versions AFTER R1 2022 */
      }
    </style>

See Also

• Appearance Overview Article
• Appearance Demo of the MaskedTextBox