web-dev-qa-db-ja.com

iPadとiPhoneのスタイリング入力ボタン

私は私のウェブサイトの入力ボタンをスタイルするためにCSSを使っていますが、IOSデバイスではスタイルはMacのデフォルトボタンに置​​き換えられています。 iOS用のボタンをスタイルする方法、または送信ボタンのように動作するハイパーリンクを作成する方法はありますか。

iphonecssiosipad
201
mheavers

あなたが探しているのかも

-webkit-appearance: none;
498
Jonas G. Drange

このCSSコードを追加してください

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
12
subindas pm

私は最近この問題に遭遇しました。

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

それが役立つことを願っています。

9
Digital Robot Gorilla

下の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!" />
1
vinod

-webkit-appearance：none。

注意：ボタンのスタイルを設定するにはブートストラップを使用してください。

0
Karthiha Karthi

今日、primefaces（primeng）とangularを使用して同じ問題が発生しました7.以下をstyle.cssに追加します

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

私はまた、reboot.cssを持つbootstrapを少し使用しています。それはそれをオーバーライドします（だからこそ！importantを追加する必要がありました）

button {
  -webkit-appearance: button;

}

0
djnose