Safari Mobile에서 입력 버튼 모서리를 둥글게 처리하지 못하도록합니다.

82

주제가 모든 것을 말하는 것 같아요. Iphone, Ipod 또는 Ipad에서 볼 때 웹 응용 프로그램이 있고 입력 제출 버튼의 모서리가 둥글다. 이것을 막을 방법이 있습니까?

ios mobile-safari

— 뉴비 플레처
소스

185

추가하면 ...

input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

그러면 버튼이 다른 브라우저에 적용한 CSS 스타일을 상속합니다.

— 방법
소스

1

iPad2, iOS 5.1.1에서는 작동하지 않습니다. 테스트 할 것이 없기 때문에 다른 iOAS 장치에서는 작동하지 않을 것이라고 확신 할 수 없습니다. 그러나 Roel의 -webkit-border-radius:0px솔루션 은 작동합니다.

— coredumperror

-webkit-appearance : none을 적용하지 않으면 Safari가 적용 할 수있는 속성에 대해 까다로워집니다 (즉, font-size및 color. 가장 좋은 솔루션은 둘 다 적용하는 것입니다.

— methodofaction

이 솔루션이 iPad, iOS 5.1.1에서 작동하는지 확인하기 위해보고합니다.

— Dominor Novus 2013

6

2 년 된 댓글에 답장하는 중 .... 오 잘. -웹킷 외관 : 없음; 체크 박스가 Chrome에 표시되지 않도록합니다. 아마도 다른 요소와 브라우저에도 영향을 미칠 것입니다.

— matthew_360 2014

와!!! 우리는 코르도바 앱에서이 문제를 해결하기 위해 몇 시간을 찾고 있었는데 이것이 해결책이었습니다! 나는 이것을 충분히 찬성 할 수 없다 !!!

— Jay Dinse 2015 년

18

나를 위해 작동하지 않았다, -webkit-appearance : none.

이것은 다음을 수행합니다.

input[type=submit] {
    -webkit-border-radius:0px;
}

iPhone에서만 배경 이미지가있는 버튼의 둥근 모서리와 동일한 문제가 발생했습니다.

— Roel
소스

1

확인 중 : 여기에서 가장 많이 득표 한 답변 (Duopixel 기준)은 작동하지 않지만 Roel의 답변은 작동합니다. 이는 아마도 몇 개월 동안 Apple의 모바일 웹킷 구현이 변경 되었기 때문일 것입니다.

— coredumperror

@CoreDumpError-당신은 그것이 당신을 위해 작동하지 않는다는 것을 의미 합니다 . 솔루션이 저에게 효과적이었습니다. 방금 구현했습니다. 왜 우리가 다른 결과를 경험하고 있는지 확실하지 않습니다. 다시 말씀 드리지만, 귀하의 게시물은 반년 이상 전에 작성되었으므로 동일한 문제가 계속 발생하는지 알 수 없습니다.

— Dominor Novus

@Roel, 당신은 단순히 우선 순위 문제가있을 수 있습니다 ...?

— Frank Nocke 2014 년

13

다음 CSS를 사용해 볼 수 있습니다.

-webkit-appearance:none;

더 많은 정보 : http://trentwalton.com/2010/07/14/css-webkit-appearance/

— Dthukka
소스

6

iPad 2에서는 다음을 사용해야합니다.

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

버튼 클래스에서.

— 다니엘 F.
소스

3

입력 제출 유형이 "이미지"인 사이트가 있습니다. 위의 변형은 둥근 모서리를 수정했습니다.

input[type=image] {
    -webkit-border-radius:0px;
}

— RevConcept
소스

1

설정 background: linear-gradient(color1, color2)이 Apple 기기에서 지나치게 둥근 모서리를 제거하고 내가 시도한 다른 모든 브라우저 / 플랫폼에서 작동 한다는 것을 발견 했습니다.

— 마이트
소스

이것은 나를 위해 그것을 고쳤고 의도하지 않은 부작용을 가질 가능성이 가장 적은 것으로 보입니다.

— Wim Deblauwe

1

"버튼"및 "제출"유형 모두에 대한 코드를 추가하여 해결했습니다.

   input[type="submit"] {
   text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

    input[type="button"] {
        text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

— AGalvis
소스