[CSS] input type="date" 모양 변경

html

<tr>
    <td style="text-align: center;">생일</td>
    <td>
        <input type="date" name="birth" placeholder="날짜를 선택해주세요">
    </td>
</tr>

 
css

input[type="date"]{
    position: relative;
    width: 40%;
    color: royalblue;
    font-weight: bold;
    text-align: center;
}
input[type='date']::-webkit-calendar-picker-indicator {
    position: absolute; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* 배경은 투명하게 */
    background: transparent; 
    /* 글자도 투명하게 이 두 설정을 통해 캘린더 아이콘을 사라지게 만든다 */
    color: transparent; 
    cursor: pointer;
}

 
결과