表單按鈕不套用iPhone內建的圓角與漸層樣式效果

梅問題-按鈕不套用iPhone中的圓角與漸層樣式效果
  最近在幫位好友,設計手機版的網頁,才發現到一件相當怪異的事,那就是表單中的按鈕,明明已經設定了樣式,同時也將圓角取消了,在其它的平台看都很正常,唯獨在iOS上,就跟別人不一樣,不但完全不理會CSS中所設定的樣式外,還自行最套自己的樣式,讓梅干感到相當的困惑,於是上網爬了許多文章,終於找到了解決辦法,只要加入屬性後,立即就可解決此問題,不再套用iOS上的按鈕樣式,因此有遇到此問題的朋友,也一塊來看看囉!

Step1
一般會透過CSS來設定,按鈕的顏色、圓角與邊框樣式。
梅問題-按鈕不套用iPhone中的圓角與漸層樣式效果
Step2
當設定完畢後,在桌機上看很正常,但在iOS上完全不為所動。
梅問題-按鈕不套用iPhone中的圓角與漸層樣式效果
Step3
接著在按鈕樣式內加入這屬性-webkit-appearance:none;
梅問題-按鈕不套用iPhone中的圓角與漸層樣式效果
Step4
這樣問題終於解決了,iOS也套用
梅問題-按鈕不套用iPhone中的圓角與漸層樣式效果

相關文章

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

MakeAppicon 線上立即產生iOS、Android所需的各種圖示大小

MakeAppicon 線上立即產生iOS、Android所需的各種圖示大小

《Pure》羽量級自適應網頁版型框架 (RWD  Framework)

《Pure》羽量級自適應網頁版型框架 (RWD Framework)

CSS教學-【Responsive 網頁自適版型】Media Screen 一覽表

CSS教學-【Responsive 網頁自適版型】Media Screen 一覽表

手機網頁必知-設定書籤網址建立到手機桌面中的APP圖示

手機網頁必知-設定書籤網址建立到手機桌面中的APP圖示





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    侯彥銘 說道:

    我想跟你說你打錯了!圖片中的是對的。但文章中的是錯的!

    圖片中的:【 -webkit-appearance:none; 】

    文章中的:【 -webkit-apperance:none; 】

    發現了嗎? apperance中少了一個 a

    回應:
    感謝告知,一時筆誤已修正了