input[type="date"] ios placeholder 잡기

			input[type="date"] {
                position: relative;
                display: inline-flex;
				align-items: center;
				justify-content: flex-start;
                padding: 0;
				background-color: white;
                border-radius: 0.5rem;
				color: inherit;
				text-align: left;
				text-indent: 0;
				-moz-background-image: none;
                appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;
				outline: 0;
			}
            
            input[type="date"]::-webkit-calendar-picker-indicator,
			input[type="date"]::-webkit-inner-spin-button {
				display: none;
				appearance: none;
			}

			input[type="date"]::-webkit-calendar-picker-indicator {
				opacity: 0;
				display: block;
				width: 3rem;
				height: 5rem;
				border-width: thin;
			}
            input::-webkit-date-and-time-value {
                text-align: left;
            }
            
            input[type="date"]:not(.has-val)::before {
					content: attr(placeholder);
                    position: absolute;
					top: 50%;
					left: 0;
                    display: flex;
					align-items: center;
                    width: 55%;
                    background: inherit
					padding-left: 6px;
					transform: translateY(-50%);
					z-index: 1;
					font-size: inherit;
				}

다음 프로젝트에선 input[type="date"] 를 쓰지 않고 싶다...
ios, android 둘 다 모바일 브라우저에서 placesholder가 노출되지 않는 이슈가 있었다.
결국 포커스나 호버, 온체인지 등으로 value가 비어있지 않은 경우 content에 텍스트 노출이 토글 되도록 했다.