java - 填写历史数据后如何更改表单的背景?
问题描述
如何在填充历史数据后更改表单的背景。一切仅在 Mozilla 中正常工作,输入背景在填充或(自动填充)历史数据后变为黄色,在 Chrome 中变为蓝色。我想在每种情况下都让它变白。这是 index.php 中的代码,其中放置了表单:
<?php
session_start();
if(isset($_SESSION['zalogowany'])&&$_SESSION['zalogowany']==true)
{
header('Location:panel.php');
exit();
}
?>
<!Doctype HTML>
<html lang="pl">
<head>
<link href="style.css" rel="stylesheet">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Bukowski-panel sprzedaży</title>
</head>
<body>
<div class="flex-box">
<div class="form-container">
<form action="zaloguj.php" method="post">
<input type="text" name="login" placeholder="login" onfocus="this.placeholder=''" onblur="this.placeholder='login'">
<input type="password" name="haslo" placeholder="haslo" onfocus="this.placeholder=''" onblur="this.placeholder='haslo'">
<input id="submit "type="submit" value="zaloguj się">
</form>
<div class="logo">Bukowski</div>
<div class="blad">
<?php
if(isset($_SESSION['blad']))
echo $_SESSION['blad'];
?>
</div>
</div>
</div>
</body>
</html>
这是来自 CSS 文件的代码,其中表单已设置样式:
body{
background-image: url("img/black_twill.png");
color: white;
font-size: 20px;
}
@font-face
{
src: url(mistral.ttf);
font-family: mistral;
}
.form-container
{
background-color: white;
width: 350px;
text-align: center;
padding-top: 35px;
-webkit-box-shadow: inset 0px 0px 5px 11px rgba(0,0,0,0.98);
-moz-box-shadow: inset 0px 0px 5px 11px rgba(0,0,0,0.98);
box-shadow: inset 0px 0px 5px 11px rgba(0,0,0,0.98);
}
.flex-box{
display: flex;
justify-content: center;
min-height: calc(100vh - 20px);
align-items: center;
}
.blad{
min-height: 30px;
padding-bottom:5px;
margin:0px;
}
.logo{
color: black;
min-height: 30px;
padding: 10px 0px 0px 0px;
font-family: mistral;
font-size: 25px;
}
input{
width: 200px;
border: 1px solid black;
}
input[type=text],
input[type=password]
{
margin: 8px;
}
input[type=submit]{
background-color: black;
color: white;
cursor: pointer;
border: 2px solid black;
padding: 3px;
font-size: 12px;
margin: 15px;
}
input[type=submit]:hover
{
background-color:#222222;
}
解决方案
尝试这个:
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own
background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
-webkit-text-fill-color: #333;
}
body {
background-image: url("img/black_twill.png");
color: white;
font-size: 20px;
}
@font-face {
src: url(mistral.ttf);
font-family: mistral;
}
.form-container {
background-color: white;
width: 350px;
text-align: center;
padding-top: 35px;
-webkit-box-shadow: inset 0px 0px 5px 11px rgba(0, 0, 0, 0.98);
-moz-box-shadow: inset 0px 0px 5px 11px rgba(0, 0, 0, 0.98);
box-shadow: inset 0px 0px 5px 11px rgba(0, 0, 0, 0.98);
}
.flex-box {
display: flex;
justify-content: center;
min-height: calc(100vh - 20px);
align-items: center;
}
.blad {
min-height: 30px;
padding-bottom: 5px;
margin: 0px;
}
.logo {
color: black;
min-height: 30px;
padding: 10px 0px 0px 0px;
font-family: mistral;
font-size: 25px;
}
input {
width: 200px;
border: 1px solid black;
}
input[type=text],
input[type=password] {
margin: 8px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 50px white inset;
/* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 50px white inset;
/*your box-shadow*/
-webkit-text-fill-color: #333;
}
input[type=submit] {
background-color: black;
color: white;
cursor: pointer;
border: 2px solid black;
padding: 3px;
font-size: 12px;
margin: 15px;
}
input[type=submit]:hover {
background-color: #222222;
}
<html lang="pl">
<head>
<link href="style.css" rel="stylesheet">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Bukowski-panel sprzedaży</title>
</head>
<body>
<div class="flex-box">
<div class="form-container">
<form action="zaloguj.php" method="post">
<input type="text" name="login" placeholder="login" onfocus="this.placeholder=''" onblur="this.placeholder='login'">
<input type="password" name="haslo" placeholder="haslo" onfocus="this.placeholder=''" onblur="this.placeholder='haslo'">
<input id="submit " type="submit" value="zaloguj się">
</form>
<div class="logo">Bukowski</div>
<div class="blad">
<?php
if(isset($_SESSION['blad']))
echo $_SESSION['blad'];
?>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- mysql - Flutter 在未来的 builder 中获取 snapshot.data[1]
- version-control - 应用程序 1.2.1 和 2.3.5 版本之间的主要区别是什么
- vba - 使用 Application.Echo 方法时的错误处理
- react-native - 使用 React Navigation 为每个底部选项卡添加后退按钮
- python - numpy NPV 和 excel NPV 之间有区别吗?
- branch.io - 如何使用 Branch.io 将链接查询参数传递给深度链接
- javascript - 如何显示复选框值(选中或未选中)
- flutter - Flutter HMAC SHA1 编码
- javascript - 反应状态钩子问题
- c++ - 有没有办法找到特征矩阵系数的中值?