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

您只需要添加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>

Answer 3

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

* {
  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>

输入文字颜色与闲置颜色不同

3 个答案: