iPad 및 iPhone 용 스타일링 입력 버튼

215

CSS를 사용하여 웹 사이트의 입력 버튼 스타일을 지정하고 있지만 IOS 장치에서는 스타일이 Mac의 기본 버튼으로 대체됩니다. iOS 용 버튼 스타일을 지정하는 방법이나 제출 버튼처럼 동작하는 하이퍼 링크를 만드는 방법이 있습니까?

— 챙겨
소스

524

당신은 찾고 있습니다

-webkit-appearance: none;

사파리 CSS 노트 -webkit-appearance
모질라 개발자 네트워크 -moz-appearance

— 조나스 지
소스

버튼 누르기 / : 활성 스타일링에는 여전히 차이가 있습니까? 스타일을 무시하고 반투명 회색 오버레이를 적용합니까?

— Alan H.

6

SCSS를 사용하는 경우@include experimental(appearance, none);

— Sam Soffes

1

불행히도 위의 링크는 죽었습니다 ( thinkvitamin.com/design/… ).

— 퀘스트 당 Aronsson

이것에 대한 한 가지 문제는 <select>상자의 경우 데스크탑 브라우저에서 화살표를 표시하지 않는다는 것입니다. 그래서 이것은 내가 생각하는 미디어 쿼리와 가장 잘 어울립니다.

— andrewtweber 2014 년

뭐 ... 진짜 이거 간단 했어? CSS스타일을 지정하기 위해 많은 줄을 사용했는데이 줄만으로도 트릭을 수행 할 수 있습니까?!

19

이 CSS 코드를 추가하십시오

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

— Subindas 오후
소스

9

나는 최근 에이 문제를 직접 만났다.

<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->

희망이 도움이됩니다.

— 디지털 로봇 고릴라
소스

3

그래도 버튼의 높이를 변경할 수 없습니다. 그러나 재미있는 것은 버튼에 사용자 정의 너비를 부여하자마자 사용자 정의 높이도 고려됩니다.

— 독감

이것은 UIkit v3의 수정 사항입니다.

— Kalob Taulien

4

아래 CSS를 사용하십시오

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   border-radius: 0;
}

h2 {
  margin: 25px 0 10px;
  font-size: 20px;
}

<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />

<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />

스 니펫 확장

— 비 노드
소스

0

-웹킷 모양 : 없음;

참고 : 부트 스트랩을 사용하여 버튼의 스타일을 지정하십시오.

— 카르티 하 카르티
소스

0

나는 오늘 primfaces (primeng)와 angular 7을 사용하여 같은 문제를 겪었습니다 .style.css에 다음을 추가하십시오.

p-button {
   -webkit-appearance: none !important;
}

또한 reboot.css가있는 부트 스트랩 비트를 사용하고 있습니다.

button {
  -webkit-appearance: button;

}

— djnose
소스