0

I have the following HTML and I need to change the placeholder colour so its same colour as the div's colour using CSS.

But I can't seem to figure this out.

I've tried this code:

.form::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #999;
  opacity: .5;
}

.dob{
    color:#999 !important;

    font-size:14px;
    text-align:left;
}

and it didn't work.

I'm also trying to achieve the same of the select option with no success.

changing the opacity doesn't seem to have any affect either.

Can someone please advice on this:

.form .row {
height:auto;
}

.form .row {
  margin-bottom: 25px;
  position: relative;
  overflow: hidden;
  display:inline-block;
  text-align:center;
  width:90%;
}

.form input[type="text"], .form input[type="password"], .form textarea, .form input[type="email"], .form input[type="tel"], .form select, .form .dob{
  width: 100%;
  height: 40px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  color: #333;
  border-radius: 3px;
  transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
  display:inline-block;
  -webkit-appearance: none;
}






.form::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #999;
  opacity: .5;
}

.dob{
 color:#999 !important;

 font-size:14px;
 text-align:left;
}

select{
 color:#999 !important;

 font-size:14px;
 text-align:left;
}
<form class="form" action="#">
 
  <div class="row">
    <input type="text" name="fancy-text" id="fancy-text" placeholder="Full Name"/>

  </div>
 
 
      <div class="row">
 
 <div class="dob" id="fancy-text5" placeholder="Date Of Birth">Date of Birth</div>
 
 

  </div>
 
  </form>
sam sexton
  • 173
  • 1
  • 10

1 Answers1

0

The following code may work:

.form::-webkit-input-placeholder {
    background-color: transparent;
}
MBiabanpour
  • 370
  • 1
  • 13