个人中心
gpt4 book ai didi

java - 表单填充历史数据后如何更改表单背景？

转载 作者：行者123 更新时间：2023-12-01 17:07:34 25 4
gpt4 key购买 nike

在填充历史数据后如何更改表单的背景。仅在 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;
}

还有一些图片来说明我的意思: enter image description here

enter image description here

最佳答案

试试这个:

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>

关于java - 表单填充历史数据后如何更改表单背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61452790/

25 4 0
文章推荐： java - Google Guice - 类必须有一个(且只有一个)用 @Inject 注释的构造函数或非私有(private)的零参数构造函数
文章推荐： java - 如何避免垃圾收集器收集对象
文章推荐： java - 在java中将 double 字符串转换为精确字符串
文章推荐： java - 需要与 "A Min ago"或 "An Hour Ago"等字符串的时差
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com