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; }

normalize.css를 사용하면 해당 스타일 시트는 다음과 같은 작업을 수행합니다 input[type="search"] { -webkit-appearance: textfield; }.

이것은 같은 단일 클래스 선택기보다 더 높은 특이성을 가지 .foo므로 그렇게 할 수는 없습니다 .my-field { -webkit-appearance: none; }. 올바른 특이성을 얻는 더 좋은 방법이 없다면 다음과 같은 도움이 될 것입니다.

.my-field { -webkit-appearance: none !important; }

이것을 시도하십시오 :

다음 input과 같이 CSS를 추가 하십시오.

 -webkit-appearance: none;
       border-radius: 0;

간단한 경계 반경을 사용했습니다. 0; 텍스트 입력 유형의 둥근 모서리를 제거합니다.

Safari 및 기타 브라우저에서 버튼을 올바르게 렌더링하려면 웹킷 모양을 none으로 설정하는 것 외에도 버튼에 특정 스타일을 지정해야합니다.

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf