iOS 입력 그림자 제거

iOS 입력 그림자 제거

---

iOS (Safari 5)에서는 입력 요소 (상단 내부 그림자)를 따라야합니다.

상단 그림자를 제거하고 싶은데 버그 -webkit-appearance가 저장되지 않습니다.

현재 스타일은 다음과 같습니다.

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

---

-webkit-appearance: none;기본 IOS 스타일을 재정의 하려면을 사용해야 합니다. 그러나 inputCSS 에서 태그 만 선택해도 IOS는 속성 선택기를 사용하여 스타일을 추가하기 때문에 기본 IOS 스타일을 재정의하지 않습니다 input[type=text]. 따라서 CSS는 미리 설정된 기본 IOS CSS 스타일을 재정의하기 위해 속성 선택기를 사용해야합니다.

이 시도:

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

유용한 링크 :

appearance여기에서 자세히 알아볼 수 있습니다 .

http://css-tricks.com/almanac/properties/a/appearance/

CSS 속성 선택기에 대해 자세히 알아 보려면 여기에서 매우 유익한 기사를 찾을 수 있습니다.

http://css-tricks.com/attribute-selectors/

---

background-clip: padding-box;

그림자도 제거하는 것 같습니다.

으로 @davidpauljunior 언급; -webkit-appearance일반 입력 선택기 설정 에 주의하십시오 .

---

웹킷은 모든 속성을 제거합니다.

-webkit-appearance: none;

box-shadow 속성을 사용하여 입력 요소의 그림자를 제거하십시오.

box-shadow: none !important;

---

나는 a.) 작동 하고 b.) 작동하는 이유를 이해할 수 있는 해결책을 찾으려고 노력했다 .

입력의 그림자 (및 입력 [type = "search"]의 둥근 테두리)는 배경 이미지에서 비롯된 것입니다.

그래서 분명히 설정 background-image: none은 나의 첫 시도 였지만 이것은 작동하지 않는 것 같습니다.

설정이 background-image: url()작동하지만 여전히 빈 url(). 현재로서는 기분이 좋지 않습니다.

background-clip: padding-box; 일을 잘하는 것 같지만 "background-clip"문서를 읽은 후에도 왜 이것이 배경을 완전히 제거하는지 이해하지 못합니다.

내가 가장 좋아하는 솔루션 :

background-image: linear-gradient(transparent, transparent);

이것은 유효한 CSS이며 어떻게 작동하는지 이해합니다.

---

이것은 나를 위해 더 잘 작동합니다. 또한 모든 다른 유형의 입력 (예 : 텍스트, 전화, 이메일 등)에 적용 할 필요가 없음을 의미합니다.

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

참고 URL : https://stackoverflow.com/questions/23211656/remove-ios-input-shadow