如何删除<input type="date">

Question

<input type="date">

显示文本框及其旁边的日历图标。如何删除文本框但保留日历图标及其功能，或者显示日历 PNG，当您单击它时，会出现一个带有日期的下拉菜单

Answer 1

你可以使用CSS来做到这一点

<style>
        .date-input-wrapper {
            position: relative;
            display: inline-block;
        }
    
        .date-input-wrapper input[type="date"] {
            font-size: 0; /* Hide text */
            color: transparent; /* Hide cursor text */
            background: transparent; /* Make the background transparent */
            border: none; /* Remove border */
        }
    
        .date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
            position: absolute;
            width: 100%;
            height: 100%;
            cursor: pointer;
            opacity: 1; /* Adjust as needed */
        }
    </style>
    
    <div class="date-input-wrapper">
        <input type="date">
    </div>