New to Kendo UI for jQuery? Download free 30-day trial

Change label style in 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-state-focused) {
          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-state-focused) {
          color: red; font-style: italic;
        }

      </style>
    </div>

See Also

In this article
Not finding the help you need? Improve this article