Mobile Safari(iPhone)에서 텍스트 영역 내부 그림자 제거

Mobile Safari(iPhone)에서 텍스트 영역 내부 그림자 제거

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

흰색 배경을 가지고 있을 때는 특히 더 못생겼습니다.

이 CSS 스타일을 추가하면 다음과 같습니다.

  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

https://developer.mozilla.org/en-US/docs/Web/CSS/appearance 에 따름

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그리고.border의 css 속성input태그도 작동하는 것 같습니다.

사용해 보십시오.

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

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

언급URL : https://stackoverflow.com/questions/3062968/remove-textarea-inner-shadow-on-mobile-safari-iphone