Question

这是显示我的问题的图像>> https://imgur.com/a/YpvMAYq <<这是我的html代码：

.form-control {
    width: 600px;
    fill: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid grey;
    font-size: 18px;
    margin-bottom: 16px;
}

<form id="contactForm" method="POST" action="">
  <input name="fName" type="text" class="form-control" placeholder="What should I call you? Person X?" required>
  <br>
  <input name="email" type="email" class="form-control" placeholder="Only, if you want to be emailed back">
  <br>
</form>

感谢您阅读本文档；）

Answer 1

正如我在评论中提到的，当输入处于特定状态时，看起来好像正在设置背景。看起来您在使用框架，如果没有那里使用的代码或codepen / jsfiddle，就无法分辨。

当输入处于css或background状态时，下面的transparent会将focus设置为active。

.form-control:focus, .form-control:active {
    background: transparent;
}

签出this question以获得有关输入状态的信息。

Answer 2

您可以在CSS代码中添加

background-color:transparent;

Answer 3

尝试一下

form{
  background: #000;
}
.form-control {
    width: 600px;
    fill: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid gray;
    font-size: 18px;
    margin-bottom: 16px;
}


input:focus {
    background-color: #fff;
    border: 2px solid #000;
    padding: 20px;
    border-radius: 10px;
}

<form id="contactForm" method="POST" action="">
  <input name="fName" type="text" class="form-control" placeholder="What should I call you? Person X?" required>
  <br>
  <input name="email" type="email" class="form-control" placeholder="Only, if you want to be emailed back">
  <br>
</form>

在输入字段框中，删除“背景”颜色

3 个答案: