ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用してブラウザによってフォームに割り当てられたデフォルトのスタイルを削除する方法

CSS を使用してブラウザによってフォームに割り当てられたデフォルトのスタイルを削除する方法

PHPz
リリース: 2017-04-02 10:39:42
オリジナル
1655 人が閲覧しました

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

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. IE10以降のブラウザのテキストボックスの後ろにある小さなバツ印を削除します

次の文だけでOKです

input::-ms-clear {
    display: none;
}
ログイン後にコピー

3. 複数行のテキストボックスのテキストエリアのドラッグを無効にします

属性を追加するには、以下をクリックしてくださいテキスト ボックスをドラッグして拡大または縮小することはできません:

textarea {
    resize: none;
}
ログイン後にコピー

ここで説明するプロパティのサイズ変更があります。これは、要素のスケーリングに使用される CSS3 プロパティです。

none デフォルト値

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

horizo​​ntal 水平方向のスケーリングのみが許可されます

vertical 垂直方向のスケーリングのみが許可されます

textarea 要素だけでなく、div など、リストされないほとんどの要素に適用されますただし、textarea とは異なり、div を使用する場合は、overflow: auto; という文を追加する必要があります。つまり、次の効果があります:

div {
    resize: both;
    overflow: auto;
}
ログイン後にコピー

以上がCSS を使用してブラウザによってフォームに割り当てられたデフォルトのスタイルを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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