iPhone/Safari 입력 요소 반올림 끄기

iPhone/Safari 입력 요소 반올림 끄기

제 웹사이트는 아이폰/사파리 브라우저에서 한 가지 예외를 제외하고 잘 렌더링됩니다.텍스트 입력 필드에 이상한 둥근 스타일이 있어 웹 사이트의 나머지 부분과 전혀 어울리지 않습니다.

CSS 또는 메타데이터를 통해 Safari에게 입력 필드를 반올림하고 원하는 대로 직사각형으로 만들지 않도록 지시하는 방법이 있습니까?

iOS 5 이상의 경우:

input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

iOS에서 둥근 모서리만 제거해야 하거나 어떤 이유로 플랫폼 전체에서 둥근 모서리를 정규화할 수 없다면 다음을 사용합니다.input { -webkit-border-radius: 0; }속성 대신 계속 지원됩니다.물론 Apple은 언제든지 Prefixed 속성에 대한 지원을 중단할 수 있지만, 다른 플랫폼별 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;
}

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

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

하고있다-webkit-border-radius: 0;혼자서는 네이티브 스타일링을 지울 수 없었습니다.이것은 또한 네이티브 앱의 웹 뷰를 위한 것이었습니다.

컴퍼스(SCSS)를 위한 완벽한 솔루션은 다음과 같습니다.

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

저도 같은 문제가 있었지만 제출 버튼만 문제였습니다.내부 그림자 및 둥근 모서리 제거 필요 -

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

텍스트 입력 유형의 둥근 모서리를 제거하기 위해 간단한 테두리 반지름: 0;을 사용했습니다.

이것을 사용해 보십시오.

추가 시도input다음과 같은 CSS:

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

Safari 및 기타 브라우저에서 단추를 올바르게 렌더링하려면 웹킷 모양을 없음으로 설정하는 것 외에 단추에 대한 특정 스타일을 지정해야 합니다. 예:

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

언급URL : https://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding