Skip to Content (Press Enter)
UserImage.jpg
Cátia Frederico
378Views
8Comments
Solved
Change the icon of the input type date
Question
Reactive
Application Type
Reactive
Service Studio Version
11.10.13 (Build 39571)

Hi everyone!

I'm trying to changed the css of the icon inside of an input type date. Has you can see in the image below the date is being overlap, so I want to get the padding or the margin to make it possible to see everything, but I can't find the css behind the widget.

Thank you!

0
0
15 Mar 2021
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Cátia,

For the given use-case, try by defining the below-mentioned CSS rules in the respective screen stylesheet section.

CSS Snippet

input[type="date"]::-webkit-calendar-picker-indicator {
    //display: none;
    //-webkit-appearance: none;
    width: 15px;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
}

.custom-inpt { // style class to adjust the Date Input control default padding value
    padding: 10px !important;
}


Hope this helps you!


Kind regards,

Benjith Sam

See solution in context
2
0
15 Mar 2021
Copy Link
2017-04-20 10-16-33
Sofia Santos
Solution

Hi Catia,


maybe you can try with this: .form-control[data-input]::-webkit-calendar-picker-indicator{}


Regards,
Sofia Santos

See solution in context
1
0
15 Mar 2021
Copy Link
2019-11-11 17-10-24
Manish Jawla
 
MVP

Hi Catia,

I think you need to increase the width of your input box instead of changing the css.

Regards,

Manish Jawla

0
0
15 Mar 2021
Copy Link
UserImage.jpg
Cátia Frederico

Hi Manish,

Thank you for your answer, but if I can't increase the width? Is it possible to change the css?

0
0
15 Mar 2021
Copy Link
2017-04-20 10-16-33
Sofia Santos
Solution

Hi Catia,


maybe you can try with this: .form-control[data-input]::-webkit-calendar-picker-indicator{}


Regards,
Sofia Santos

1
0
15 Mar 2021
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Cátia,

For the given use-case, try by defining the below-mentioned CSS rules in the respective screen stylesheet section.

CSS Snippet

input[type="date"]::-webkit-calendar-picker-indicator {
    //display: none;
    //-webkit-appearance: none;
    width: 15px;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
}

.custom-inpt { // style class to adjust the Date Input control default padding value
    padding: 10px !important;
}


Hope this helps you!


Kind regards,

Benjith Sam

2
0
15 Mar 2021
Copy Link
UserImage.jpg
Cátia Frederico

Thank you Benjith and Sofia!! That solves my problem!

0
0
15 Mar 2021
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP

You're welcome, Cátia

Glad to help you :)


Kind regards,

Benjith Sam

0
0
15 Mar 2021
Copy Link
UserImage.jpg
Chandrakanth Itaphu

how to change the calendar icon color. I tried with background img but it still doesn't work :/

3
0
25 Jan 2023
Copy Link
2023-07-03 14-28-45
Vinicius Seixas

I am also stuck on this.. With the dark theme I implemented I am trying to apply the css to the icon in the input field, but no luck..

0
0
19 Jul 2024
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.