아이폰 아이폰 OS 상자 그림자가 표시되지 않습니다 제대로

Question

대답하는 디자인의 문의 양식이 삽입 된 그림자와 정기적 인 외부 그림자 모두 입력 필드가

디자인. 아래 이미지를 참조하십시오.

---

강령

input { 
    background:#fff; 
    height:auto; 
    padding:8px 8px 7px; 
    width:100%; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    border:#fff solid 3px; 
    border-radius:4px; 
    box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2); 
} 

---

일 문제

아이폰 OS V4 + 제대로 상자 그림자를 표시하지 않습니다. 아래 이미지를 참조하십시오.

---

내가 -webkit-상자 그림자를 사용하여 시도

을 테스트.

-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25), 
        inset 2px 2px 3px rgba(0, 0, 0, .2); 

입력 요소에 display:block;을 적용했습니다.

---

현재 해결 방법은

나는이 작업을 수행하지 않아도 선호하는, 그러나 이것은 내가 원하는 효과를 얻을 수있는 유일한 방법입니다.

HTML

<p><input /></p> 

CSS에도이 해결 방법에

p { 
    width:50%; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-shadow:0px 0px 5px rgba(0, 0, 0, .35); 
    border-radius:4px; 
} 

    input { 
     background:#fff; 
     height:auto; 
     padding:8px 8px 7px; 
     width:100%; 
     box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     border:#fff solid 3px; 
     border-radius:4px; 
     box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2); 
    } 

, iOS의 삽입 그림자가 제대로 렌더링되지 않습니다; 그러나 충분히 가깝습니다.

---

내 질문

는 iOS 기기에서 제대로 렌더링 하나의 요소에 상자 그림자의 여러 인스턴스를 가질 수 있습니까? 그렇지 않다면 삽입 그림자는 어떨까요? 아니면이 속성과 값을 잘못 사용하고 있습니까?

미리 감사드립니다.

Answer 1

-webkit-appearance: none;을 추가하면 iOS가 엉망진창을 그리는 경향이 있습니다.