[css] iOS는 입력에 둥근 모서리와 눈부심을 강제합니다.

Program / 글쓴이

iOS 장치는 양식 입력, 특히 입력 [type = submit]에 많은 성가신 스타일을 추가합니다. 아래는 데스크톱 브라우저와 iPad의 동일한 단순 검색 양식입니다.

데스크탑 :

데스크탑

iPad :

아이 패드

input [type = text]은 CSS box shadow inset을 사용하며 심지어 -webkit-border-radius : none을 지정했습니다. 분명히 무시됩니다. 입력 [type = submit] 버튼의 색상과 모양이 iPad에서 완전히 멍청 해집니다. 이 문제를 해결하기 위해 내가 무엇을 할 수 있는지 아는 사람이 있습니까? 미리 감사드립니다.

답변

내가 일했던 버전은 다음과 같습니다.

input {
    -webkit-appearance: none;
}

일부 웹킷 브라우저 버전에서는 border-radius여전히 존재하는 문제에 직면 할 수도 있습니다 . 다음으로 재설정하십시오.

input {
    -webkit-border-radius:0;
    border-radius:0;
}

이 모든 웹킷 스타일에 적용하도록 확장 할 수 있습니다 form와 같은 구성 요소 input, select, button또는 textarea.

원래 질문과 관련하여 단위 기반 css 요소를 지울 때 ‘none’값을 사용하지 않습니다. 또한 이것은 Chrome에서 확인란을 숨기므로 input[type=text]또는 같은 것을 사용 input[type=submit], input[type=text]하십시오 ( input:not([type=checkbox]), input:not([type=radio])모든 입력이 두 조건 중 하나를 충족하므로 모든 입력 유형에 적용됩니다).

답변

다음과 같이 더 많은 웹킷 양식, 입력 등 스타일을 제거 할 수 있습니다.

input, textarea, select {
   -webkit-appearance: none;
}

답변

제출 버튼의 경우 다음을 사용하지 마십시오.

<input type="submit" class="yourstylehere" value="submit" />

대신 버튼 태그를 사용하세요.

<button type="submit" class="yourstylehere">Submit</button>

이것은 나를 위해 일했습니다.

답변

normalize.css 살펴보기

양식 요소를 테스트하고 iOS에서 어떻게 보이는지 확인할 수있는 데모가 있습니다. 웹킷 지향 특성이 여러 개 있습니다.

답변

이것이 내 프로젝트에서 사용하는 것입니다.

* {
    -webkit-tap-highlight-color: transparent;
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none;
    -webkit-user-select: none;
}
input, select, textarea {
    -webkit-appearance: none;
    -webkit-border-radius:0;
    border-radius: 0;
}

답변

다음과 같은 경우 일부 브라우저에서도이 문제가 발생합니다.

<a class="btn btn-primary" href="#" type="button">Link</a>

대신에:

<a class="btn btn-primary" href="#" role="button">Link</a>

이는 anker 요소에 대한 입력 요소를 변경 type하고 으로 변경하는 것을 잊은 경우 발생할 수 있습니다 role.

내 iPad의 Chrome과 Safari 모두 에서이 문제가 발생했습니다.

답변