[Malleys]

кто нибудь может объяснить что даёт каждый из них?

Это селекторы псевдоэлементов, отвечающих за различные части виджета. Названия говорят сами за себя.

надо избавиться от стрелки при клике на которую появляется сетка календаря...

я поняла

я не правильно поняла?

То, что вы сделали по прежнему позволяет менять дату. Если вы хотели, чтобы нельзя было менять дату, то используйте атрибут disabled...

<input type="date" disabled value="2020-08-04">

Если вы хотели, чтобы не было видно стрелки, но календарь всё-равно появлялся, то можно сделать так...

<style>
input[type="date"] {
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
}
</style>
<input type="date" value="2020-08-04">