Webkit-autofill pozadí u inputu a Chrome

30. 12. 2013 16:21:38

Ahoj,

rád bych vás požádal o radu jak vyřešit možná drobnost ale pro mne celkem zapeklitou.

mám formulář v něm jsou dvě pole pro username a heslo. V IE a FF je barva pozadí pole bílá dle specifikace, ale v Chromu se Webkit stará o podbarvení do té defaultní žluté co je definovaná přímo ve Webkitu.

Na Internetu jsem nalezl radu jak se zbavit toho podbarvení - doplnit tag FORM nebo přímo jednotlivé INPUTy atributem AUTOCOMPLETE="OFF". Potud dobré, po načtení stránky je pole bílé jak má být, ale po kliknutí myší do pole s username se objeví v prohlížeči uložená hodnota uživatele a po jejím vybrání se doplní do pole username správné uživatelské jméno a do pole password příslušné heslo.

Nicméně v tuto chvíli (tedy ještě před odesláním) se pozadí těchto polí změní zase na tu žlutou kterou tam cpe user agent webkit. Ať jsem zkoušel co jsem zkoušel do CSS (!important u background atributu inputu s ID formu i pole), nezadařilo se mi.

Dokázal byste mi někdo s tímhle pomoci? Kus korespondujícího kódu je níže.

Do CSS jsem z googlu zkusil nacpat toto:

Díky předem

---------- Příspěvek doplněn 30.12.2013 v 17:40 ----------

Nakonec jsem kus kódu co to umožnil ohnout vygooglil. Ten patří do CSS stylů:

Celkem to tedy je takto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pokus</title>
<style type="text/css" />
body
{
  margin: 0 auto;
  font-size: 13px;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-weight: normal;
  font-style: normal;
  /* position: relative; */
  width: 100%;
  min-height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  overflow: hidden;
}

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
}

.login-label
{
	float:left;
	width:50px;
	margin-top:5px;
}

.login-field
{
	margin-left:50px;
	margin-top:5px;
}

input, input, input, input, textarea
{
	background: #FFFFFF !important;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #CCD6E0;
	margin: 2px auto;
	width: 100px;
	padding: 2px 0 2px 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #000000 !important;
	font-size: 10px;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-weight: normal;
	font-style: normal;
	font-variant: small-caps;
	text-transform:uppercase;
}

</style>
</head>

<body>

<form method="post" action="pokus.php" name="login-form" class="login-form">
 <div class="login-label">
     	<label for="modlgn-username">Uživatel</label>     
     </div>
     <div class="login-field">
     	<input id="modlgn-username" type="text" name="username" size="18" />
     </div>
     <div class="login-label">
     	<label for="modlgn-passwd">Heslo</label>
     </div>
     <div class="login-field">
     	<input id="modlgn-passwd" type="password" name="password" size="18"  />
     </div>
     
	 <input type="submit" name="Submit" class="button" value="Submit" /> <input type="reset" class="button" value="Reset" />
</form>

</body>
</html>

30. 12. 2013 16:21:38