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

フォームを作成するとき、一部のブラウザーではデフォルトのスタイルがフォームに割り当てられます。たとえば、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 サイトの他の関連記事を参照してください。