[css] input Box Type Date 선택 영역을 확장시키고 싶을 때

        <div class="wpSelect wpSelectDate">

            <div class="styleDate">

            <input type="date" class="datepicker boxDesign" id="startDate">

            </div>

            <div class="blank">~</div>

            <div class="styleDate">

            <input type="date" class="datepicker boxDesign" id="endDate">  

            </div>

        </div>

html은 요로코롬 구성되어 있습니다. 사실 저기서 안쓰는 class도 있는데요,,, 괜히 건드렸다가 안 될 것 같아서 못 만지겠음 ㅋ

    /* 달력 디자인 */

    .wpSelectDate{

        display:flex;

        margin-top:4.1026vw;

        justify-content: space-between;  

    }

    .datepicker{

        color: #767676;

        text-indent: 0.5128vw;

        padding-left: 7%;

    }

    .wpSelectUser{

        display:flex;  

    }

    input,select{

        -webkit-appearance: none;

        -moz-appearance: none;

        appearance: none;

        background-image: url('https://s2.svgbox.net/hero-outline.svg?ic=chevron-down');

        background-repeat: no-repeat;

        background-position: right center;

        background-size: 0.9rem 0.9rem;

        outline: none;

        border: none;

        font-size: 0.8rem;

        background-color: rgba(0,0,0,0);

        border-radius: 0;

       

        }

    select{

        color: #767676;

   

    }

/* 날짜 입력 상자 스타일 수정 */

.styleDate input[type="date"] {

    /* 기본 스타일 초기화 */

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-color: transparent;

    background-image: url('https://s2.svgbox.net/octicons.svg?ic=calendar-bold');

    background-repeat: no-repeat;

    background-position: left center;

    font-size: 0.8rem;

    color: #767676;

    width: 50%;

    text-align: center; /* 텍스트 가운데 정렬 추가 */

    padding-left: 0.5vw; /* 왼쪽 여백 조절 */

}

/* 텍스트 색상 변경 (선택 사항) */

.styleDate input[type="date"]::-webkit-datetime-edit-text {

    color: #767676; /* 텍스트 색상 변경 */

    cursor: pointer;

    text-align: center; /* 텍스트 가운데 정렬 추가 */

}

/* 날짜 아이콘을 텍스트 왼쪽에 배치하고, 전체 입력 상자를 클릭 가능하게 설정 */

.styleDate input[type="date"]::-webkit-calendar-picker-indicator {

    position: absolute;

    top: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    cursor: pointer;

}

/* 입력 상자를 감싸는 부모 요소에 width 추가 */

.wpSelectDate input[type="date"],

.wpSelectDate select {

    width: calc(42vw - 0.025vw);

    padding-left: 1rem;

}

이건 css 코드입니다.....

뭔가 중복되어있는게 많이보이죠? 이것도 건드렸다가 안되는 불상사를 막기위해 

어?왜되지 이게 ? 하면서 그냥 냅뒀습니다....

 

그냥 다음에 내가 

" input Box의 type을 date로 했을 때, 기본 스타일은 구리며 아이폰에서도 엄청엄청구려지는 이슈와 웹에선잘되지만 아이폰에선 적용안되는 이슈 ( 이게 그...apperance에서 webkit이랑 moz등등의 차이임. 그 .... os?라고하나??그머라고하더라 암튼 그 ..... 검색엔진이라고해야하나 암튼 그거가 다 다름 이름이 )땜에 고생을 하며, 날짜 indicator의 위치바꾸기, 아이콘바꾸기, indicator의 터치 영역을 아이콘 뿐만아니라 input box어디를 클릭하건 클릭이되게하기 "

를 하고싶을 때를 위한 기록입니다....

calc저거 이상해보이죠? 

네

야매로 범위 계산해서

클릭범위 늘렸습니됴 ㅋ