web-dev-qa-db-ja.com

自動入力の入力時に黄色の背景を削除します

このいchrome自動入力時に背景を削除する方法は誰でも知っていますか？（以下を参照してください。）

enter image description here

これまで私は試しました：

*:focus {
    outline: 0;
}
input:-webkit-autofill {
    -webkit-box-shadow: none;
    -webkit-text-fill-color: #fff !important;
}
button:focus, input:focus, a:focus {
    text-decoration: none !important;
    outline: none !important;
}

悲しいことに、それらのどれも動作しません。どんな助け、アイデア、手がかり、提案も大歓迎です。

htmlcssformscss3input
20
Juliver Galleto

奇妙なことに、これはWebkitの 意図された動作 であり、ユーザーが自動入力されたと推測できます。

[email protected]このカラーリング動作はWebKitから継承しており、設計によるものだと思います。ユーザーは、データが事前に入力されていることを理解できます。

次を使用できます。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

背景が白に変わります。

以下を追加して、オートコンプリートをオフにすることもできます。

autocomplete="off"

例えば

<input type="text" name="some_name" autocomplete="off"></input>

あなたの意見ですが、使いやすさのためにこれに反対することをお勧めします。

24
Ryan McDonough
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border:none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
  transition: background-color 5000s ease-in-out 0s;
}

これは、mouseleaveでの黄色の再配置の後遺症を修正するようです

GIF of with and without.

6
Carl Boneri
.form-item-search-block-form input:focus, 
.form-item-search-block-form input:hover, 
.form-item-search-block-form input:active {
    outline: 0 none;
    border: 0 none;
    background: #282828;
    background: url("../images/search_btn.png") no-repeat 96% 9px;
    color: rgb(202,202,202);
}

.form-item-search-block-form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #282828 inset;
    -moz-box-shadow: 0 0 0 1000px #282828 inset;
    box-shadow: 0 0 0 1000px #282828 inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    -webkit-text-fill-color: #eee !important;
}
1
Amir