iPad / iPhone에서 CSS 제출 버튼 이상한 렌더링

222

반경, 색상 및 테두리를 사용하여 CSS로 버튼의 스타일을 지정하면 모양이 좋지만 iphone / ipad / ipod에서는 끔찍한 것처럼 보입니다 ... Safari Desktop과 같은 렌더링이 아니어야합니까 ??

여기에 이미지 설명을 입력하십시오

iphone css ipad mobile-safari mobile-webkit

— 프란체스코
소스

— skolima

답변:

453

죄송합니다! 방금 나 자신을 찾았습니다 : 필요한 요소 에이 줄을 추가하십시오.

   -webkit-appearance: none;

— 프란체스코
소스

나는 당신을 사랑합니다, stackoverflow, @Francesco

— jahrichie

훌륭합니다. 그리고 여기 CSS 트릭에 관한 훌륭한 기사가 있습니다. WebKit 및 Mozilla에 의해 변경된 다른 모든 요소가 나열됩니다.

— Patrick

나침반 잘으로 이것에 대한 믹스 인이 compass-style.org/reference/compass/css3/appearance을

— 패트릭 Beeson에게

12 시간 전에이 Google 검색을 수행했으면합니다. 감사합니다.

— Elly Post

정말 대단해! iOS에서도 이런 종류의 문제가 발생했다고 생각하지 않았습니다. 다시 한번 감사드립니다!

— Saurabh Prajapati

이 코드를 CSS 파일에 추가하십시오.

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

도움이 될 것입니다.

— Subindas 오후
소스

큰! 양식 제출 버튼이 이제 iPad에 표시되는 것처럼 보입니다

— peterkodermac

@peterkodermac 부모 CSS 클래스를 추가하는 것을 잊지 마십시오. 그렇지 않으면 모든 입력 필드에 영향을 줄 수 있습니다.

— subindas 오후

웹킷 모양에 대한 위의 답변은 마술을 수행했지만 버튼은 다른 장치 / 데스크탑의 브라우저와 비교할 때 여전히 창백하고 둔하게 보입니다. 또한 불투명도를 전체로 설정해야했습니다 (0에서 1까지의 범위).

-webkit-appearance:none;
opactiy: 1

불투명도를 설정 한 후 버튼은 모든 다른 장치 / 에뮬레이터 / 데스크톱에서 동일하게 보입니다.

— 프리 얀크 탁 카르
소스