javascript - 自动完成移除边框

Question

我的表单关闭了自动完成功能，但所有现代浏览器都忽略了这一点。当用户输入他们的名字时，边框会保留，但当用户使用自动完成时，边框会被移除。

.half {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

input[type=name] {
  width: 100%;
  padding: 15px;
  display: inline-block;
  margin-bottom: 10px;
  outline: none;
  border-radius: 30px;
  box-sizing: border-box;
  border: solid 5px transparent;
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  box-sizing: border-box;
}

.contain {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 200px;
  max-height: 200px;
  margin-bottom: 10px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: solid 5px transparent;
  border-radius: 30px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 200px;
  max-height: 200px;
  padding: 15px;
  resize: none;
  display: inline-block;
  outline: none;
  border: none;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  border-radius: 30px;
  box-sizing: border-box;
}

<div class="half">
  <form method="post" name="submitted" action="submitted" autocomplete="off">
    <input type="name" id="forename" name="forename" placeholder="Forename"><br>
    <div class="contain">
      <textarea></textarea>
    </div>
    <br>
    <input type="submit" name="submit" id="submit" value="Contact Me" required="">
  </form>
</div>

即使无法完全禁用自动完成，即使自动完成，我将如何维护边界。

标签： javascripthtmlcss

Answer 1

首先，没有办法（真的）影响backgroundChrome 的任何陈述:-webkit-autofill。我们可以操纵任何东西，但不能操纵background. 我看到的唯一解决方案是input用您的边框风格化边框覆盖父级。:-webkit-autofill然后用规则技巧保护白色背景颜色。

虽然我换.contain了一个.gradien班。并改为type=name（type=text没有这种类型的广告name）。

现在，即使您将切换autocomplete="on"- 样式将与没有自动完成完全一样。为了保持渐变，你必须用类覆盖你input和textarea父元素中的所有内容.gradient。

.half {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.gradient {
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: solid 5px transparent;
  border-radius: 30px;
  margin-bottom: 10px;
  overflow: hidden;
}

input[type=text] {
  width: 100%;
  padding: 15px;
  margin: 0 !important;
  display: inline-block;
  margin-bottom: 10px;
  outline: none;
  box-sizing: border-box;
  border: none;
  background: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  box-sizing: border-box;
}


/* Change Autocomplete styles in Chrome*/

input[type=text]:-webkit-autofill,
input[type=text]:-webkit-autofill:hover,
input[type=text]:-webkit-autofill:focus {
  /* this will protect agains the blue highlite */
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 200px;
  max-height: 200px;
  padding: 15px;
  resize: none;
  display: inline-block;
  outline: none;
  border: none;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  border-radius: 30px;
  box-sizing: border-box;
}

<div class="half">
  <form method="post" name="submitted" action="submitted" autocomplete="off">
    <div class="gradient"><input type="text" id="forename" name="forename" placeholder="Forename"></div>
    <div class="gradient">
      <textarea></textarea>
    </div>
    <br>
    <input type="submit" name="submit" id="submit" value="Contact Me" required="">
  </form>
</div>