iPad 및 iPhone용 스타일 입력 버튼

iPad 및 iPhone용 스타일 입력 버튼

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

찾으실 수 있습니다.

-webkit-appearance: none;

• Safari CSS 참고 사항
• Mozilla 개발자 네트워크

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

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

저는 최근에 이 문제를 접했습니다.

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

도움이 되길 바랍니다.

아래의 css를 사용합니다.

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-appearance: none; /*For Chrome*/
  -moz-appearance: none;/*For Mozilla*/
   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!" />

저는 오늘 프라임 페이스(프리멩)와 앵귤러 7을 사용하여 동일한 문제를 겪었습니다.style.css에 다음을 추가합니다.

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

나는 또한 reboot.dll이 있는 부트스트랩을 사용하고 있는데, 그것은 그것을 재정의합니다. (왜 내가 !important를 추가해야 했는지 설명합니다.)

button {
  -webkit-appearance: button;

}

-웹킷 준수: 없음;

참고: 부트스트랩을 사용하여 단추 스타일을 지정합니다.반응하는 것이 일반적입니다.

언급URL : https://stackoverflow.com/questions/5449412/styling-input-buttons-for-ipad-and-iphone