iPhone / Safari 입력 요소 반올림 끄기 텍스트 입력 필드에는 이상한

내 웹 사이트는 iPhone / Safari 브라우저에서 잘 렌더링되지만 한 가지 예외가 있습니다. 내 텍스트 입력 필드에는 이상한 둥근 스타일이있어 나머지 웹 사이트에는 전혀 어울리지 않습니다.

입력 필드를 반올림하지 않고 의도 한대로 사각형으로 렌더링하지 않도록 Safari (CSS 또는 메타 데이터를 통해)에 지시하는 방법이 있습니까?

답변

iOS 5 이상에서 좋은 방법 border-radius은 다음과 같습니다.

input {
    border-radius: 0;
}

iOS에서 둥근 모서리 만 제거해야하거나 다른 이유로 플랫폼에서 둥근 모서리를 정규화 할 수없는 경우 접두사 -webkit-border-radius특성을 대신 사용하십시오 . 여전히 지원됩니다. 물론 Apple은 언제든지 접두사 속성에 대한 지원을 중단 할 수 있지만 다른 플랫폼 별 CSS 기능을 고려할 때 기회가있을 수 있습니다.

레거시 버전에서는 -webkit-appearance: none대신 설정해야 했습니다.

input {
    -webkit-appearance: none;
}

답변

input -webkit-appearance: none; 혼자서는 작동하지 않습니다.

추가 -webkit-border-radius:0px;하여 추가하십시오.

답변

IOS에서 반올림을 제거하는 가장 좋은 방법입니다.

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

참고 : 이 옵션을 선택 옵션에 사용하지 마십시오. 우리 선택에 문제가있을 것입니다.

답변

Chrome에서 허용 된 답변 라디오 버튼이 사라집니다. 이것은 작동합니다 :

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

답변

나침반 (SCSS)을위한 완벽한 솔루션은 다음과 같습니다.

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

답변

iPhone 3GS의 iOS 5.1.1의 경우 검색 필드의 스타일을 지우고 원하는 스타일로 설정해야했습니다.

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

이렇게 -webkit-border-radius: 0;만하면 기본 스타일을 취소하지 않았다. 이것은 기본 앱의 웹뷰에도 사용되었습니다.

답변

동일한 문제가 있었지만 제출 버튼에만 해당됩니다. 내부 그림자와 둥근 모서리를 제거해야합니다-

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }