css iPhone、iPadのデフォルトボタンスタイルを削除
3273 ワード
最近HTML 5で携帯電話のステーションを書いて、テストの時にアップルの携帯電話の上で1つの問題を発見しました.すべてのボタンはアップルが持参したスタイルに置き換えられた.効果は次のとおりです.
でも正解はみそ紫滴だったはず!~
スタイルにcss削除iPhone、iPadのデフォルトボタンスタイルを一言付ければいい!
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
textarea { -webkit-appearance: none;}
フィレットの問題がある場合は、
.button{ border-radius: 0; }
フォームを書くとき、Chormeブラウザの下で、テキストボックスとドロップダウン選択ボックスがフォーカスをロードすると、光るフレームが表示され、火狐やグーグルブラウザの下で、複数行のテキストボックスtextareaが自由にドラッグ&ドロップすることができます.また、IE 10の下で、テキストボックスに内容を入力すると、テキストボックスの右側に小さなフォークが表示されます.これらの効果はユーザー体験で向上したことは疑いの余地がありませんが、デフォルトのスタイルは必要ない場合がありますが、どうすればいいのでしょうか.次はそれぞれ解決策を見てみましょう.
1、Chromeなどのブラウザテキストボックスのデフォルトの発光枠を取り除く
でも正解はみそ紫滴だったはず!~
スタイルにcss削除iPhone、iPadのデフォルトボタンスタイルを一言付ければいい!
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
textarea { -webkit-appearance: none;}
フィレットの問題がある場合は、
.button{ border-radius: 0; }
フォームを書くとき、Chormeブラウザの下で、テキストボックスとドロップダウン選択ボックスがフォーカスをロードすると、光るフレームが表示され、火狐やグーグルブラウザの下で、複数行のテキストボックスtextareaが自由にドラッグ&ドロップすることができます.また、IE 10の下で、テキストボックスに内容を入力すると、テキストボックスの右側に小さなフォークが表示されます.これらの効果はユーザー体験で向上したことは疑いの余地がありませんが、デフォルトのスタイルは必要ない場合がありますが、どうすればいいのでしょうか.次はそれぞれ解決策を見てみましょう.
1、Chromeなどのブラウザテキストボックスのデフォルトの発光枠を取り除く
input:focus, textarea:focus {
outline
:
none
;
}
ハイライトスタイルを するには:
input:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-modify:read-write-plaintext-only;}
もちろん、テキストボックスがフォーカスにロードされると、すべてのブラウザの のテキストボックスの に やスタイルの はありませんが、 に じて することができます.input:focus,textarea:focus {
outline
:
none
;
border
:
1px
solid
#f60
;
}
これにより、テキストボックスにフォーカスを れると、 の がオレンジ になり、ユーザーにフィードバックします.
2、IE 10+ブラウザのテキストボックスの ろのフォークを り く
の だけでOKinput::-ms-clear {
display
:
none
;
}
3、 テキストボックスtextareaのドラッグを する
のようにプロパティの テキストボックスを すると、ドラッグして することはできません.textarea {
resize:
none
;
}
ここでは、 のスケーリングに されるCSS 3プロパティのプロパティresizeについて します.これは、 の をとることができます.
noneデフォルト
bothは および のスケーリングを にする
horizontalでは のスケールのみが されています
verticalは のスケールのみを します
textarea だけでなく、divなどの くの に できますが、ここでは つ つ げませんが、textareaとは なり、divの にoverflow:autoを ける があります.これが ですdiv {
resize:
both
;
overflow
:
auto
;
}
ああ、 、フォームブラウザのデフォルトスタイルを する について しました.