相关疑难解决方法(0)

我正在尝试学习React和Material UI.

我正在创建一个Web表单,到目前为止一切都很好,除非页面加载时,chrome自动用以前存储的数据填充文本字段,背景变为黄色.我该如何保持白色？

我知道在普通的CSS中我会包含这段代码:

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

然而,考虑到这一点,我不一定有样式表,这就是一个问题.

我到目前为止:

const MyAwesomeReactComponent = React.createClass({
const containerStyle = 
    {
      /* input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
          } */
    };
 return (
      <div style={containerStyle}>
           <form action="/login" method="post" autocomplete ="off">
              <div>
                  <TextField hintText="Email Field" floatingLabelText="Email"  underlineFocusStyle={{borderColor: Colors.amber900}} />
              </div>
              <div>
                  <TextField hintText="Password Field" floatingLabelText="Password" type="password" />
              </div>
              <div>
                  <RaisedButton label="Submit" primary={true}/>
              </div>
          </form>
});
module.exports = MyAwesomeReactComponent;

我在解析input-webkit-autofill代码时遇到语法错误.

我正在尝试更改输入中的自动填充背景颜色。

在线接受的答案似乎是这样的：

删除 Chrome 自动完成的输入背景颜色？

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
input:-internal-autofill-selected,
input:-internal-autofill-previewed {
    background-color: white !important;
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

这似乎在一种情况下可以接受，即字段已经自动填充时。

这意味着我刷新了浏览器，并且这些字段已经预先填充了用户名/密码。

当我将鼠标悬停在或单击输入时，背景颜色会发生变化。但是，当我什么都不box-shadow做时没有效果，它仍然设置为默认的user agent stylesheet.

input:-internal-autofill-selected {
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

我也尝试了一些随机属性但没有成功。

input:-internal-autofill,
input:-internal-autofill:hover, 
input:-internal-autofill:focus, 
input:-internal-autofill:active,

Chrome 版本 77.0.3865.90（官方版本）（64 位）

根本不知道如何覆盖它。就像它被添加到 css 规则的底部一样，important无法覆盖？

我目前有一个为 Bootstrap 2 运行 bootstrap-sass 的 Rails 4 应用程序。我使用 localhost 进行测试。我有带有登录屏幕的应用程序。输入字段是白色的，带有蓝色文本的非常细的灰色边框。当我在字段中输入时，输入字段的背景是白色和蓝色文本。但是，当我转到保存登录信息的登录屏幕时，信息会填满字段，但将两个字段的背景更改为黄色，文本为黑色。一个是文本字段，另一个是密码字段。

我希望使用我在视图中定义的 css 填写信息。有没有办法用 CSS 做到这一点？我没有发现任何有关此特定问题的信息。

任何帮助，将不胜感激。我会继续寻找。

更新 3/28/2014 上午 9:15 CDT

我成功地从 Martin 建议的链接中实施了解决方案，以更改自动填充的背景颜色。我决定猜测并搜索 webkit 字体颜色文本，并找到了更改自动填充字体颜色的解决方案。

这是我的解决方案：

input:-webkit-autofill {
  -webkit-text-fill-color: $textColor;
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:-moz-autofill {
  -moz-text-fill-color: $textColor;
  -moz-box-shadow: 0 0 0px 1000px white inset;
}
input:-o-autofill {
  -o-text-fill-color: $textColor;
  -o-box-shadow: 0 0 0px 1000px white inset;
}
input:-khtml-autofill {
  -khtml-text-fill-color: $textColor;
  -khtml-box-shadow: 0 0 0px 1000px white inset;
}

CSStransition-duration或transition-delay属性中持续时间的最大值是多少？我找不到这个信息。

我发现只有默认值是0s.

我使用了这些文件：

1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
2. https://drafts.c​​sswg.org/css-transitions/
3. https://www.w3.org/TR/css3-transitions/
4. https://drafts.c​​sswg.org/css-values-3/#time-value

我有一个输入，在Chrome中，当自动完成菜单弹出时，您将鼠标悬停在其中一个选项上，输入下方的内容会跳转。就像自动完成选择一样，由于某种原因，它会添加垂直填充。我该如何停止这很烦人。这是一个例子：

小提琴演示

您可能不得不摆弄小提琴，因为在代码段中，由于某些原因自动完成功能被禁用。但是，如果单击输入并将鼠标悬停在自动完成条目上，您会看到绿色框移动。为什么会发生这种情况，以及如何禁用此行为。

div{
  width:300px;
  height:200px;
  background: green;
}

<input type="text" name="q" />
<div></div>

我有一个简单的表单，其中包含一个带有type="password". 该表单还包括一些其他输入字段。

由于某些疯狂的原因，Chrome 中的密码字段和输入字段具有浅蓝色背景。在 Firefox 中不是问题。当我将密码输入字段类型更改为“文本”即类型=“文本”时，背景为所需的白色。

哪个 css 规则负责此问题以及如何覆盖或禁用此规则？这是在 vue.js 文件中。

input[type="password"] {
  background-color: white;
}

<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label class="form-label">Password</label>

      <input type="password" class="form-control" name="example-text-input-invalid is-invalid" placeholder="Password" v-model="user.password" v-bind:pattern="passwordRulesRegex" v-bind:title="passwordRulesText" />
      <!-- <div class="col col-md-1"> -->
      <div class="invalid-feedback">Invalid feedback</div>
    </div>
  </div>
  <div class="col-md-8">
    <label class="form-label">&nbsp;</label>
    <small class="form-text text-muted mt-3">
            Enter a new password, or leave this blank to keep the existing password.
        </small>
  </div>
</div>

上面的样式没有效果...