CSS chromeカーネルブラウザ

2130 ワード

一、chromeカーネルブラウザフォームの自動充填によりinputテキストボックスの背景が黄色になる問題解決:
1.質問
chromeフォームが自動的に埋め込まれると、inputテキストボックスの背景が黄色になります.
2.原因
chromeは、自動的に埋め込まれたinputフォームにinput:-webkit-autofillのプライベート属性をデフォルトで追加し、次のスタイルを付与します.
input:-webkit-autofill { 
	background-color: #FAFFBD; 
	background-image: none; 
	color: #000; 
}
3.解決方法:
シナリオ1:inputテキストボックスは純色の背景です
Input:-webkit-autofillでは、input入力ボックスの黄色の背景を上書きするのに十分な純粋な色のシャドウを使用できます.たとえば、次のようにします.
input:-webkit-autofill { 
	-webkit-box-shadow: 0 0 0px 1000px white inset; 
	border: 1px solid #CCC!important; 
}
補足:フィレットなどのプロパティを使用している場合、または入力ボックスの長さの高さが間違っていることが判明した場合は、chromeのデフォルト定義のbackground-colorを除いて、background-imageは使用できません.importantが優先度を上げる以外は、他の属性も使用できます!importantは、次のように優先度を上げます.
input:-webkit-autofill { 
	-webkit-box-shadow: 0 0 0px 1000px white inset; 
	border: 1px solid #CCC!important; 
	height: 27px!important; 
	line-height: 27px!important; 
	border-radius: 0 4px 4px 0; 
} 
シナリオ2:inputテキストボックスは画像の背景を使用します
これは面倒で、まだ完璧な解決方法が見つかっていません.2つの選択肢があります.
(1)背景が複雑ではなく、簡単なシャドウしかない場合は、上記の方法で黄色の背景を十分な純色のシャドウで覆うことができると思いますが、この場合は元のシャドウ効果がないにすぎません. 
(2)もしあなたが本当に元のシャドウ効果を残したいならば、chromeが自動的にフォームを埋める機能を犠牲にしてjsを使って実現するしかありません.例えば:
$(function() { 
	if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { 
		$(window).load(function(){ 
			$('ul input:not(input[type=submit])').each(function(){ 
				var outHtml = this.outerHTML; 
				$(this).append(outHtml); 
			}); 
		}); 
	} 
}); 
遍歴したオブジェクトは、あなたのニーズに応じて調整される可能性があります.jsを使用したくない場合は、formラベルでフォームの自動塗りつぶし機能を直接閉じます.autocomplete="off". 
4.参照:http://www.jb51.net/css/99317.html
二、chromeカーネルブラウザがフォーカスを取得した後、input textareaに枠線が現れる問題解決:
1.質問:
フォーム・アイテムのコントロールがフォーカスされると、黄色の枠線、特にinput[text]とtextareaが表示され、textareaの右下隅にマウスでテーブルtextareaサイズをドラッグできる機能があります.
2.解決方法:
CSSはchromeブラウザのデフォルト効果をクリアします:
(1)フォーム・アイテムのフォーカス解除時に発生する黄色の枠線:
input,button,select,textarea{outline:none}
(2)textareaのドラッグをキャンセルしてサイズを変更する機能:
textarea{resize:none}