Change styling of wj-input-type down arrow

Change styling of wj-input-type down arrow

Posted by: eh1160 on 25 April 2024, 7:37 am EST

• 

  eh1160

  • Post Options:
  • Link
    Copy

  Posted 25 April 2024, 7:37 am EST - Updated 25 April 2024, 7:42 am EST

  Does Wijmo have an official way to alter the styling of wj-input-time’s dropdown arrow? I would like to change it to a Font Awesome icon and style it to look like the attached png.

  I know I can create CSS that targets the component’s DOM/selectors to override the current styling, but I was looking for a more official way to theme the component. I’m afraid that my custom styling could break when we upgrade to newer version of Wijmo in the future.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 25 April 2024, 5:00 pm EST

  Hello,
  
  Please refer to the following demo sample to change the default icons for Input Controls. The demo sample shows to change the InputDate default icon.
  
  https://developer.mescius.com/wijmo/demos/Input/InputDate/Customization/purejs

  For changing the Icon for InputTime, please use the following code snippet:

  input.InputTime.controlTemplate = `<div class="wj-template">
    <div class="wj-input">
      <div class="wj-input-group wj-input-btn-visible">
        <input wj-part="input" type="text" class="wj-form-control">
        <span wj-part="btn" class="wj-input-group-btn">
          <button class="wj-btn wj-btn-default" tabindex="-1">
            <span class="wj-glyph-clock"></span>
          </button>
        </span>
      </div>
    </div>
    <div wj-part="dropdown" class="wj-content wj-dropdown-panel"></div>
  </div>`

  For removing the left border of the icon, use the following CSS:

  .wj-inputtime .wj-btn{
      border-left:none !important;
  }

  Hope it helps!

  Regards,
  
  Manish Gupta