모바일 사파리 (iPhone)에서 텍스트 영역 내부 그림자 제거

기본적으로 Mobile Safari는 텍스트 영역을 포함한 모든 입력 필드에 맨 위 내부 그림자를 추가하는 것 같습니다. 그것을 제거하는 방법이 있습니까?

흰색 배경이 있으면 특히 추한 것입니다.

이 CSS 스타일을 추가하면 :

-webkit-appearance: none;

CSS 스타일을 추가하는 동안

-webkit-appearance: none;

작동합니다. 모든 것을 제거합니다. 대신 이것을 시도 할 수 있습니다 :

box-shadow: none !important;

이렇게하면 아래쪽 화살표를 유지할 수 있습니다.

쉬운 해결책은 다음과 같습니다.

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

때로는 스타일 시트 appearance: none;에 문제가 생겼을 때이를 고칠 수있는 방법이 있습니다 caret. 가장 좋은 방법은 코드를 다시 작성하고 코드의 일부가 무엇인지 알아내는 것입니다.none

사용하기 전에 caret다른 스타일에 문제가 생길 수 있음을 알아야합니다

-webkit-appearance: caret;
   -moz-appearance: caret;
     -o-appearance: caret;
        appearance: caret;

참고 : 사용 none, caret최적이 아니다.

https://stackoverflow.com/a/51626446/9287284

background-clip: padding-box;

나는 여기에서 더 오래된 동일한 답변 의견을 발견했습니다.

https://stackoverflow.com/a/29750016/9287284

태그 의 background및 borderCSS 속성 중 하나 를 설정해 input도 작동하는 것 같습니다.

이 시도:

<style>
input {
    background: #ccc;
    border: none;
}
</style>

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>