Change the icon of the input type date
Question
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!

mvp_badge
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

Solution

Hi Catia,


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


Regards,
Sofia Santos

mvp_badge
MVP

Hi Catia,

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

Regards,

Manish Jawla

Hi Manish,

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

Solution

Hi Catia,


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


Regards,
Sofia Santos

mvp_badge
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

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

mvp_badge
MVP

You're welcome, Cátia

Glad to help you :)


Kind regards,

Benjith Sam

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