html - 選択した入力のデフォルトのクロムスタイルを削除するにはどうすればよいですか？

Question

選択した入力のデフォルトの黄色のボックスの境界線を削除し、ChromeまたはSafariなどのブラウザでフィールドを選択するにはどうすればよいですか？カスタムボックスシャドウcssで入力をカスタマイズしたい。デフォルトのブラウザ選択境界線を削除するにはどうすればよいですか？

score 104 · Accepted Answer

104

-webkit-appearance: none;

独自のスタイルを追加します

于 2012-09-06T10:05:57.253 に答える

score 44 · Accepted Answer

44

textarea, input { outline: none; }

https://stackoverflow.com/a/935572/1036298経由

于 2012-09-06T10:08:51.073 に答える

score 14 · Accepted Answer

少ないためのMixin

.appearance (@value: none) {
    -webkit-appearance:     @value;
    -moz-appearance:        @value;
    -ms-appearance:         @value;
    -o-appearance:          @value;
    appearance:             @value;
}

score 8 · Accepted Answer

アウトラインのデフォルトのブラウザスタイルを削除するには、単純なコードを使用します

input { outline: none; }

score 6 · Accepted Answer

CSSにこれを追加します：

input {-webkit-appearance: none; box-shadow: none !important; }
:-webkit-autofill { color: #fff !important; }

Chrome専用！:)

score 2 · Accepted Answer

2

input:-webkit-autofill {
    background: #fff !important;
}

于 2012-09-06T10:06:48.013 に答える

score 1 · Accepted Answer

入力ボックスにカーソルを合わせるだけでなく、クリックしたときに話しているのですか？これは私のためにそれを修正しました：

input:focus {
   outline: none;
   border: specify yours;
}

score 1 · Accepted Answer

数値のタイプで入力を見ると、入力フィールドの右側にあるスピナーボタン（上/下）に気付くでしょう。これらのスピナーは必ずしも望ましいとは限らないため、以下のコードはそのようなスタイルを削除して、あるタイプのテキストを含む入力の入力に似た入力をレンダリングします。

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

score 1 · Accepted Answer

プロパティボックスを適用する前に-シャドウ：なし

プロパティボックスを適用した後-シャドウ：なし

これは最も簡単な解決策であり、私にとってはうまくいきました

input {
   box-shadow : none;  
}

score 0 · Accepted Answer

入力ボックスをクリックすると、デフォルトのスタイルが表示されます。それを削除して独自のスタイルを追加し、以下のコードを適用します...

方法1：

input:focus {
    outline: none;
 }

方法2：

input:focus, textarea:focus, select:focus{
        outline: none;
}

これがお役に立てば幸いです...

html - 選択した入力のデフォルトのクロムスタイルを削除するにはどうすればよいですか？

10 に答える 10

Related

Reference