输入文本颜色与空闲颜色不同

Question

好的，所以，我会尽力解释这一点......

我正在设计联系公式的样式。

我已将输入焦点文本设置为白色。

但是当我点击离开我的表单时，输入的文本颜色变为黑色。

我的问题是，当我点击我的表单时如何设置输入文本颜色的样式？

示例如下：

* {
  background: red;
}

.contact-formula {
  height: auto;
  width: 100%;
  padding-left: 32.5%;
}

input {
  width: 50%;
  height: 5vh;
  display: block;
  background: transparent;
  border: none;
  border-bottom: .25vh solid orange;
}

input[type=submit] {
  width: 20%;
  margin-top: 2.5vh;
  text-align: center;
  background: orange;
  color: white;
  font-size: 2.5vh;
  cursor: pointer;
}

textarea {
  width: 50%;
  background: transparent;
  border: none;
  border-bottom: .25vh solid orange;
  resize: none;
  height: 15vh;
}

label {
  color: white;
  font-size: 2.5vh;
}

::placeholder {
  font-size: 3vh;
  color: white;
  text-transform: uppercase;
}

textarea:focus,
input:focus {
  color: white;
  font-size: 3vh;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

<div class="contact-formula">
  <form name="htmlform" method="post" action="html_form_send.php">
    <input type="text" name="first_name" maxlength="50" size="30" placeholder="First Name" autofocus><br>
    <input type="text" name="last_name" maxlength="50" size="30" placeholder="Last Name"><br>
    <input type="text" name="email" maxlength="80" size="30" placeholder="email"><br>
    <textarea name="comments" maxlength="1000" cols="25" rows="6" placeholder="Message"></textarea><br>
    <input type="submit" value="Submit">
  </form>
</div>

我希望有人能指出我正在忽略/遗漏的内容。

提前致谢！

Answer 1

这是因为您使用的是:focus 伪类。 如果你删除:focus，那么它会正常工作。

* {
  background: red;
}

.contact-formula {
  height: auto;
  width: 100%;
  padding-left: 32.5%;
}

input {
  width: 50%;
  height: 5vh;
  display: block;
  background: transparent;
  border: none;
  border-bottom: .25vh solid orange;
}

input[type=submit] {
  width: 20%;
  margin-top: 2.5vh;
  text-align: center;
  background: orange;
  color: white;
  font-size: 2.5vh;
  cursor: pointer;
}

textarea {
  width: 50%;
  background: transparent;
  border: none;
  border-bottom: .25vh solid orange;
  resize: none;
  height: 15vh;
}

label {
  color: white;
  font-size: 2.5vh;
}

::placeholder {
  font-size: 3vh;
  color: white;
  text-transform: uppercase;
}

textarea,
input {
  color: white;
  font-size: 3vh;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

<div class="contact-formula">
  <form name="htmlform" method="post" action="html_form_send.php">
    <input type="text" name="first_name" maxlength="50" size="30" placeholder="First Name" autofocus><br>
    <input type="text" name="last_name" maxlength="50" size="30" placeholder="Last Name"><br>
    <input type="text" name="email" maxlength="80" size="30" placeholder="email"><br>
    <textarea name="comments" maxlength="1000" cols="25" rows="6" placeholder="Message"></textarea><br>
    <input type="submit" value="Submit">
  </form>
</div>

Answer 2

你应该删除 textarea, input 上的 :focus ：

* {
  background: red;
}

.contact-formula {
  height: auto;
  width: 100%;
  padding-left: 32.5%;
}

input {
  width: 50%;
  height: 5vh;
  display: block;
  background: transparent;
  border: none;
  border-bottom: .25vh solid orange;
}

input[type=submit] {
  width: 20%;
  margin-top: 2.5vh;
  text-align: center;
  background: orange;
  color: white;
  font-size: 2.5vh;
  cursor: pointer;
}

textarea {
  width: 50%;
  background: transparent;
  border: none;
  border-bottom: .25vh solid orange;
  resize: none;
  height: 15vh;
}

label {
  color: white;
  font-size: 2.5vh;
}

::placeholder {
  font-size: 3vh;
  color: white;
  text-transform: uppercase;
}

textarea,
input {
  color: white;
  font-size: 3vh;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

<div class="contact-formula">
  <form name="htmlform" method="post" action="html_form_send.php">
    <input type="text" name="first_name" maxlength="50" size="30" placeholder="First Name" autofocus><br>
    <input type="text" name="last_name" maxlength="50" size="30" placeholder="Last Name"><br>
    <input type="text" name="email" maxlength="80" size="30" placeholder="email"><br>
    <textarea name="comments" maxlength="1000" cols="25" rows="6" placeholder="Message"></textarea><br>
    <input type="submit" value="Submit">
  </form>
</div>

Answer 3

您只需添加input[type=text] {color: white;}

* {
  background: red;
}

.contact-formula {
  height: auto;
  width: 100%;
  padding-left: 32.5%;
}

input {
  width: 50%;
  height: 5vh;
  display: block;
  background: transparent;
  border: none;
  border-bottom: .25vh solid orange;
}

input[type=text] {
  color: white;
  font-size: 3vh;
}

input[type=submit] {
  width: 20%;
  margin-top: 2.5vh;
  text-align: center;
  background: orange;
  font-size: 2.5vh;
  cursor: pointer;
}

textarea {
  width: 50%;
  background: transparent;
  border: none;
  border-bottom: .25vh solid orange;
  resize: none;
  height: 15vh;
}

label {
  color: white;
  font-size: 2.5vh;
}

::placeholder {
  font-size: 3vh;
  color: white;
  text-transform: uppercase;
}


input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

<div class="contact-formula">
  <form name="htmlform" method="post" action="html_form_send.php">
    <input type="text" name="first_name" maxlength="50" size="30" placeholder="First Name" autofocus><br>
    <input type="text" name="last_name" maxlength="50" size="30" placeholder="Last Name"><br>
    <input type="text" name="email" maxlength="80" size="30" placeholder="email"><br>
    <textarea name="comments" maxlength="1000" cols="25" rows="6" placeholder="Message"></textarea><br>
    <input type="submit" value="Submit">
  </form>
</div>