[css] Input , Select Box 디자인 수정법

InputBox랑 SelectBox 디자인이 구릴때...

    select{

        /*ios대응*/

        -webkit-appearance: none;

        -moz-appearance: none;

        appearance: none;

       

        }

        select::-ms-expand{

        display:none; /* 화살표 없애기 for IE10, 11*/

        }

    select#deleteBorderSelectBox {

            outLine:0px;

            background-color: none;

            border-radius: 0;

        }

input{

    outLine:0px;

    background-color: none;

    border-radius: 0;

}

 

 

요로코롬 하면된다.

특히 IOS에서 짱짱짱짱구려지기 때문에... 깔끔히 하려면 싹! 다 빼주는게 좋다 !

아니 개열심히 찾고 있었는데 꼴랑 저거 input select 태그에다가 스타일만 해주면 되는게 어이없었다 ㅋ

 

그리고 아래 코드는...개같이 고생해서 꼼수라고 생각하고 적었는데 아니었음 ;;;

그 .... 기본 select 박스와 input박스의 이미지 ( 백그라운드가 그냥 이미지 그 자체 였음..) 그래서 백그라운드에 투명을 준 뒤에 svg이미지 링크 가져와서 덮어 씌우기 !!!!!!!!!! 이거 진짜 감격스럽다... 내쪼대로 디자인 할 수 있었던 거임 ...

그리고 webkit이랑 moz 이런 appearance설정 있는 이유가

브라우저마다 호환성이 좀 달라서 뭐 webkit이 그... 파이어폭스랑 사파리였나 그럴거임 암튼 그런 호환성 다른 것 마다 달라져서 하나하나 none해서 백그라운드 지워주는거임.

 

그리고 css에서 svg url 설정가능하는거 너무 신기했음!!!! 

fontawesome은 태그로 (<i></i>)해야 해서 svg url을 제공해주는 svgBox사이트에서 받아왔음 ㅎㅎ 

 

아 미친 뿌듯;;;

    input,select{

        outline: none;

        border: none;

        font-size: 0.9rem;

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

        border-radius: 0;

    }

   

    input,select{

        outline: none;

        border: none;

        font-size: 0.9rem;

        background-color: transparent;

        border-radius: 0;

    }

    input::-webkit-calendar-picker-indicator{

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

        opacity: 0;

    }

    /*ddddddddddddddd*/

    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;

        padding-right: 20px;  

        background-size: 0.9rem 0.9rem;        }

        /*

        select::-ms-expand{

        display:none;

        }

     */

/*dfdffd*/

     input[type="date"] {

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

        appearance: none;

        -webkit-appearance: none;

        -moz-appearance: none;

   

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

        background-repeat: no-repeat;

        background-position: right center;

        background-color: transparent !important;

   

        background-size: 0.9rem 0.9rem; }