How to Change the icon in the input type Time
Application Type
Reactive

Hi everyone!

I'm trying to change the icon inside of an input field time. but I am unable to change it. Is there any option there to change the icon in the input field time in reactive web?


Solution

https://stackoverflow.com/a/45128029/5797063

You need to use this to change the icon. Put this CSS on your theme and you will see it changing.

With the input icon widget unfortunately is not possible because the inputs of data type time will have always the icon just if you change the data type but then you will lose the features of a data type time input.

This is the class you need

input[type="time"]::-webkit-calendar-picker-indicator

input[type="time"]::-webkit-calendar-picker-indicator {

     background: url(https://mywildalberta.ca/images/GFX-MWA-Parks-Reservations.png) no-repeat;

}


One thing that I would do is. Use the input with icon widget and remove the icon from the input of type time like this

input[type="time"]::-webkit-calendar-picker-indicator {

     display none;

}

That way you can manage and change the icon you want :)

Now you have two options. One where you can put any icon you want using a link or from the fontawesome icons and another where you can use the icon widget and choose an icon from the ones that are available.

Kind Regards,

Márcio

Thankyou so much for your solution

Hi Dhivakar,

there is a widget that allows you to choose the icon:

If it still doesn't fit your purpose you can copy the widget from OutSystemsUI and customize it.

Regards

thank you for your response

Solution

https://stackoverflow.com/a/45128029/5797063

You need to use this to change the icon. Put this CSS on your theme and you will see it changing.

With the input icon widget unfortunately is not possible because the inputs of data type time will have always the icon just if you change the data type but then you will lose the features of a data type time input.

This is the class you need

input[type="time"]::-webkit-calendar-picker-indicator

input[type="time"]::-webkit-calendar-picker-indicator {

     background: url(https://mywildalberta.ca/images/GFX-MWA-Parks-Reservations.png) no-repeat;

}


One thing that I would do is. Use the input with icon widget and remove the icon from the input of type time like this

input[type="time"]::-webkit-calendar-picker-indicator {

     display none;

}

That way you can manage and change the icon you want :)

Now you have two options. One where you can put any icon you want using a link or from the fontawesome icons and another where you can use the icon widget and choose an icon from the ones that are available.

Kind Regards,

Márcio

Thankyou so much for your solution

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.