change icon of datepicker CSS

[Bad Addy]

I am trying to change the grid icon with a custom one for the datetime picker, and its not working as planned due to the icon showing, under the grid.

Searching these forums has shown me, but not how to over come this.

This is how it looks:

This is the chrome element info:

And in my custom CSS I have this simple requestL

pre
[dsid=prop_availDate] .ui-icon-grid {
background: url('../image/calendar_icon.jpg') !important;
}
/pre

How do I stop the grid from showing? I have tried using :after, but the new icon will not show. I have tried to z-index, but that did not work.

Thanks

[Evgene Karachevtsev]

Hello Addy,

This code works correctly gor me:

code[dsid=mobiledatepicker_113] .ui-icon-grid:after{
background: url('../image/calendar.png') !important;
background-size: 20px 20px !important;
background-repeat: no-repeat !important;

}/code

[Bad Addy]

if I use that code, this is what I get:

pre
[dsid=prop_availDate] .ui-icon-grid:after{
background: url('../image/calendar-icon.jpg') !important;
background-size: 20px 20px !important;
background-repeat: no-repeat !important;
}
/pre

The icon does not change at all

[Bad Addy]

Sorry, the image title was wrong, with the correct I still get the grid:

[Evgene Karachevtsev]

Addy,

Could you please send us public link to your application
http://docs.appery.io/documentation/s...

[Bad Addy]

I sent in a support ticket with it as it cannot be public

[Evgene Karachevtsev]

Addy,

It's all because of the theme ios7. Please add one more property:
content:""!important;

[Bad Addy]

awesome, thank you