iPadおよびiPhoneの入力ボタンのスタイル

214

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

— 麻婆
ソース

524

あなたが探している可能性があります

-webkit-appearance: none;

Safari CSSに関する注意事項 -webkit-appearance
Mozilla Developer Network's -moz-appearance

— ジョナス・G・ドランジュ
ソース

ボタンの押し下げ/：アクティブなスタイル設定にはまだ違いがありますよね？それはあなたのスタイルを無視し、半透明の灰色のオーバーレイを適用しますか？

— アランH.

6

SCSSを使用している場合は、次を使用します@include experimental(appearance, none);

— Sam Soffes 2012

1

上記のリンクは残念ながら現在は無効になっています（thinkvitamin.com/design/…）。

— Quested Aronssonによる2012

この問題の1つは、<select>ボックスの場合、デスクトップブラウザでは矢印が表示されないことです。したがって、これはメディアクエリと組み合わせるのが最適だと思います。

— andrewtweber 2013年

えっと…本当にこんなに簡単だったの？私はCSSそれをスタイルするために多くの線を使いました、そしてこの線はトリックをするのに十分でしたか？！

19

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

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

— スビンダス午後
ソース

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!" />

スニペットを展開

— vinod
ソース

0

-webkit-appearance：なし。

注：ブートストラップを使用してボタンのスタイルを設定します。レスポンシブでは一般的です。

— カルティハカルティ
ソース

0

今日、primefaces（primeng）とangular 7を使用して同じ問題が発生しました。次のコードをstyle.cssに追加してください。

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

私はまた、reboot.cssが含まれているそれを上書きするブートストラップを使用しています（そのため、！importantを追加する必要がありました）。

button {
  -webkit-appearance: button;

}

— djnose
ソース