Change the Label Style in the TextBox

Environment

Product	TextBox for Progress® Kendo UI®
Created with version	2020.3.1118

Description

I can't change the style of the textbox label. I would like to be able to change the style before the floating (example: color: red; font-style: italic;) and after the floating (example: color: black; font-style: normal;). How can I do?

Solution

To achieve the desired behaviour, we will need both some JavaScript and CSS because we need to plan for when the user adds value.

1. Add the style for the textbox when it is not focused but it is floating
2. In the change event of the textbox, check if there is a value and toggle the style as required

    <style>
        .k-floating-label-container {
          width: 100%;          
        }

        .k-floating-label-container:not(.k-focus) {
          color: red; font-style: italic;
        }       
    </style>

    change: function(e){
        if(this.value()){
            $(".k-floating-label-container").css({color: "black", fontStyle:"normal"});
        } else{
            $(".k-floating-label-container").css({color: "red", fontStyle:"italic"});
        }
    }

    <div id="example">
      <div class="demo-section k-content">
        <h4>Set value</h4>
        <input id="textbox" style="width: 100%;" />
      </div>

      <script>
        $(document).ready(function () {
          // create TextBox from input HTML element
          $("#textbox").kendoTextBox({
            placeholder: "Name",
            label: {
              content: "Name",
              floating: true
            },
            change: function(e){
              if(this.value()){
                $(".k-floating-label-container").css({color: "black", fontStyle:"normal"});
              } else{
                $(".k-floating-label-container").css({color: "red", fontStyle:"italic"});
              }
            }
          });
        });
      </script>

      <style>
        .k-floating-label-container {
          width: 100%;          
        }

        .k-floating-label-container:not(.k-focus) {
          color: red; font-style: italic;
        }

      </style>
    </div>

See Also

• API Reference of the change Event