ホームページ > ウェブフロントエンド > htmlチュートリアル > css_html/css_WEB-ITnose を使用して iPhone および iPad のデフォルトのボタン スタイルを削除する

css_html/css_WEB-ITnose を使用して iPhone および iPad のデフォルトのボタン スタイルを削除する

WBOY
リリース: 2016-06-24 11:20:58
オリジナル
1078 人が閲覧しました

CSSを削除してiPhoneやiPadのデフォルトのボタンスタイルを削除するスタイルに文章を追加するだけです! ~

input[type="button"], input[type="submit"], input[type="reset"] {

-webkit-Appearance: none;

}

textarea { -webkit-Appearance : none;}

まだ角丸の問題が解決しない場合は、

.button{ border-radius: 0; }

フォームを作成すると、一部のブラウザがフォームにデフォルトのスタイルを与えることがわかります。 Chrome ブラウザでは、テキスト ボックスとドロップダウン選択ボックスはフォーカスを読み込むと枠線が光ります。また、Firefox と Google Chrome では、複数行のテキスト ボックスのテキストエリアを自由にドラッグして拡大できます。 IE10では、テキストボックスに内容を入力すると、テキストボックスの右側に小さな×印などが表示されます。これらの効果によってユーザー エクスペリエンスが向上したことは間違いありませんが、場合によってはこれらのデフォルト スタイルが必要ない場合、どうすればよいでしょうか?解決策を個別に見てみましょう。

1. Chrome やその他のブラウザーでテキスト ボックスのデフォルトの照らされた境界線を削除します

input:focus, textarea:focus {

概要 : なし

}

ハイライトスタイルを削除:

input:focus{

-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write -plaintext- のみ;
}

もちろん、テキスト ボックスにフォーカスが読み込まれると、すべてのブラウザーでテキスト ボックスの境界線の色やスタイルは変わりませんが、必要に応じて再度設定できます。例:

input:focus,textarea:focus {

アウトライン : none ;

border : 1px ソリッド #f60

}

この場合、テキスト ボックスにフォーカスが読み込まれると、境界線の色がオレンジ色に変わり、ユーザーにフィードバックが表示されます。

2. IE10+ブラウザのテキストボックスの後ろにある小さなバツ印を削除します

次の文だけでOKです

input::-ms-clear {
表示: なし。

ここで言及する属性のサイズ変更があります。これは、要素のスケーリングに使用される CSS3 属性です。次の値を取ることができます:

デフォルト値なし

水平方向と垂直方向のスケーリングのみを許可します

水平方向のみを許可します

vertical は垂直方向のスケーリングのみを許可します

textarea 要素だけでなく、div などのほとんどの要素にも適用できます。ここでは 1 つずつリストしませんが、textarea とは異なり、次の場合に追加する必要があります。 div を使用する overflow: auto; の文が有効です:

オーバーフロー : 自動

div {

サイズ変更: 両方 ;

}

ああ、上記はフォーム ブラウザのデフォルト スタイルの削除についてです。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート