Hover effects on Form Placeholder Text

Question

I am trying to change the color of the placeholder text of a contact form when hovering over it. Is this possible using only html/CSS or is javascript necessary?

You will see in the code below that I have put each input field of the contact form within its own div in order structure it properly on the page, which results in some long and messy code. But otherwise it has worked well. I have the background of the input fields set to change when hovering.

What I don't understand is why using the hover selector on the form to make the text bold works on BOTH the placeholder text and the input text; however, changing the color on hover works ONLY on the input text and NOT to placeholder.

I tried nesting the::placeholder selector (as well as its counterparts for various web browsers) inside the hover selector in the SCSS document to change the color when hovering but with no luck.

Does anyone have any advice for how to make this placeholder text color change when hovering?

I included some images of the site and my code below.

Thanks!

Contact form as is. Contact form on hover; placeholder text color not changing.

HTML & CSS CODE

 .contact-form { text-align: center; justify-content: center; position: relative; }.name { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 40vw; padding: 0; }.first { float:left; width: 50%; padding: 0.5em; padding-left: 0; margin: 0; }.form-control-first { color: #878F93; background-color: white; border: none; border-radius: 1em; box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em; padding: 1em; font-family: Circe; font-weight: 300; font-size: 1em; margin-top: 1em; margin-bottom: 1em; width: 100%; }.form-control-first:hover { color: white; font-weight: 600; background-color: #AEBDB2; cursor: pointer; }.form-control-first:focus { outline: none; pointer-events: none; }.last { float:left; width: 50%; padding: 0.5em; padding-right: 0; margin: 0; }.form-control-last { background-color: white; color: #878F93; border: none; border-radius: 1em; box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em; padding: 1em; font-family: Circe; font-weight: 300; font-size: 1em; margin-top: 1em; margin-bottom: 1em; width: 100%; }.form-control-last:hover { color: white; font-weight: 600; background-color: #AEBDB2; cursor: pointer; }.form-control-last:focus { outline: none; pointer-events: none; }.email-message { position: relative; top: 5.5em; bottom: 0; left: 0; right: 0; padding-top: 0em; margin: auto; width: 40vw; }.form-control-email { background-color: white; color: #878F93; border: none; border-radius: 1em; box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em; padding: 1em; font-family: Circe; font-weight: 300; font-size: 1em; margin: 0; margin-top: 0.5em; margin-bottom: 0.5em; width: 100%; }.form-control-email:hover { color: white; font-weight: 600; background-color: #AEBDB2; cursor: pointer; }.form-control-email:focus { outline: none; pointer-events: none; }.form-control-message { background-color: white; color: #878F93; border: none; border-radius: 1em; box-shadow: rgba(0, 0, 0, 0.1) 0em 0em 1em 0em; padding: 1em; text-align: left; font-family: Circe; font-weight: 300; font-size: 1em; margin: 0; margin-top: 0.5em; margin-bottom: 0.5em; width: 100%; height: 30vh; max-width: 100%; max-height: 30vh; }.form-control-message:hover { color: white; font-weight: 600; background-color: #AEBDB2; cursor: pointer; }.form-control-message:focus { outline: none; pointer-events: none; }.form-control-submit { justify-content: center; align-items: center; padding: 0.75em; padding-left: 2em; padding-right: 2em; font-family: Circe; font-weight: bold; font-size: 0.75em; text-transform: uppercase; color:white; border-radius: 2em; background-color: #207CB4; border: none; display: inline-block; margin: 0px, 2px; text-decoration: none; }.form-control-submit:hover { color: #174456; background-color: #FFE98E; cursor: pointer; }::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #878F93; }:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #878F93; opacity: 1; }::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #878F93; opacity: 1; }:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #878F93; }::-ms-input-placeholder { /* Microsoft Edge */ color: #878F93; }::placeholder { /* Most modern browsers support this now. */ color: #878F93; }

 <div class="contact-form"> <form id="contact-form" method="post"> <div class="name"> <div class="first"> <input name="first-name" type="text" class="form-control-first" placeholder="First Name" required> </div> <div class="last"> <input name="last-name" type="text" class="form-control-last" placeholder="Last Name" required> </div> <br> </div> <div class="email-message"> <input name="email" type="text" class="form-control-email" placeholder="Email" required> <br> <textarea name="message" class="form-control-message" placeholder="Type your message here." row="4" required></textarea> <br> <input type="submit" class="form-control-submit" value="Submit"></div> </form> </div>

Answer 1

This worked for me!

.input {
}

.input::placeholder {
  color: red;
}

.input:hover::placeholder {
  color: blue;
}