CODEWITHSUNDEEP
javascriptjqueryhtmlcssinput
Paul
Paul

Reputation: 3368

When an Input is active, the placeholder's opacity or color changes

I figured out how to change the placeholder's opacity and color, but I am unsure of how I can alter the same when the input is actually active. In addition, I am wanting text to be placed under the input when the input is active.

How do I change the color/opacity of a placeholder element when the input is active. Please point me in the right direction for the text under the input when it is active.

.gray {
  background-color: #CCC;
  width: 100%;
  height: 200px;
}
.input-borderless {
  border-top: 0px;
  border-bottom: 2px solid green;
  border-right: 0px;
  border-left: 0px;
  background-color: #CCC;
  text-decoration: none;
  outline: none;
}
::-webkit-input-placeholder { /* Safari, Chrome and Opera */
  color: #000;
  opacity: 1;
}

:-moz-placeholder { /* Firefox 18- */
  color: #000;
  opacity: .7;
}

::-moz-placeholder { /* Firefox 19+ */
  color: orange;
}

:-ms-input-placeholder { /* IE 10+ */
   color: #000;
  opacity: .7;
}

::-ms-input-placeholder { /* Edge */
  color: #000;
  opacity: .7;
}
:placeholder-shown {
  color: #000;
  opacity: .7;
}
<div class="gray">
<input type="text" class="input-borderless" placeholder="Your Name">
</div>

Upvotes: 1

Views: 257

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

My proposal is:

.gray {
  background-color: #CCC;
  width: 100%;
  height: 200px;
}
.input-borderless {
  border-top: 0px;
  border-bottom: 2px solid green;
  border-right: 0px;
  border-left: 0px;
  background-color: #CCC;
  text-decoration: none;
  outline: none;
}
::-webkit-input-placeholder { /* Safari, Chrome and Opera */
  color: #000;
  opacity: 1;
}

:-moz-placeholder { /* Firefox 18- */
  color: #000;
  opacity: .7;
}

::-moz-placeholder { /* Firefox 19+ */
  color: orange;
}

:-ms-input-placeholder { /* IE 10+ */
  color: #000;
  opacity: .7;
}

::-ms-input-placeholder { /* Edge */
  color: #000;
  opacity: .7;
}
:placeholder-shown {
  color: #000;
  opacity: .7;
}
:focus::-webkit-input-placeholder {
  color: blue;
  opacity: 0.5;
}
:-moz-placeholder:focus {
  color: blue;
  opacity: 0.5;
}
:-ms-input-placeholder:focus {
  color: blue;
  opacity: 0.5;
}
<div class="gray">
    <input type="text" class="input-borderless" placeholder="Your Name">
</div>

Upvotes: 1

Related Questions