Цвет вводимого текста отличается от цвета бездействия - PullRequest
Новая
       22

Цвет вводимого текста отличается от цвета бездействия

0 голосов
/ 18 октября 2018

Хорошо, я постараюсь объяснить это как можно лучше ...

Я работаю над стилизацией формулы контакта.

Я установил фокус вводатекст, чтобы иметь цвет белого.

Но когда я щелкаю по форме, введенный текст становится черным.

Мой вопрос: как мне стилизовать цвет введенного текста, когда я нажимаю на форму?

Пример ниже: 

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

Я надеюсь, что кто-то может указать мне на то, что я пропускаю / пропускаю.

Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 18 октября 2018

Вы должны просто удалить :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>
0 голосов
/ 18 октября 2018

Это потому, что вы используете псевдокласс :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>
0 голосов
/ 18 октября 2018

Вам просто нужно добавить 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>
...