To make easier for user i want to add icon in text field to clear. How can this be done or can you add as feature in the future?
I tested and this works on Chrome and Edge on Windows. This setting does not work on iOS (iphone safari). You can fix on iOS using this:
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 14px;
width: 14px;
display: block;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
/* setup all the background tweaks for our custom icon */
background-repeat: no-repeat;
/* icon size */
background-size: 14px;
}
I think a native solution would be more reliable.
I wonder how to trigger an event on Clear Icon click?
Thanks for the Swift reply. It is <RadzenTextBox type="search" . I will be doing autocomplete search and data will be bind in RadzenGrid. On clear icon click of RadzenTextBox, I have to Reset a Griddata. For this to happen I have to trigger an event on clear icon click of RadzenTextBox