CODEWITHSUNDEEP
csswebkit
eddy abikhalil
eddy abikhalil

Reputation: 25

placeholder not showing the same color in firefox

I have a below form. place holder is not having the same color in firefox as chrome or EDGE, i tried these css tricks:

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: white;
}

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

 :-ms-input-placeholder {
  /* IE 10+ */
  color: white;
}

 :-moz-placeholder {
  /* Firefox 18- */
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form id="myForm" action="#" method="post">
  <div class="container">
    <div class="row">
      <div class="col-md-6 ">
        <input type="text" class="form-control inputCustom " placeholder="Full Name" name="fname" required="required" id="fname">
        <input type="text" class="form-control inputCustom " placeholder="Father's Name" name="lname" id="lname" required="required">
        <input type="text" class="form-control inputCustom " placeholder="Office Address" name="offAddress" id="offAddress" required="required">
        <input type="tel" class="form-control inputCustom " placeholder="Mobile Number" name="Mnum" id="Mnum" required="required">
      </div>
    </div>
  </div>
</form>

still not working any idea? i searched a lot and didn't found the right solution plus i am new to front-end development thank you in advance

Upvotes: 0

Views: 1045

Answers (2)

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

its come from your bootstrap file

write css code with !important so its work

like: color: blue !important;

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: blue !important;
}

 ::-moz-placeholder {
  /* Firefox 19+ */
  color: blue !important;
}

 :-ms-input-placeholder {
  /* IE 10+ */
  color: blue !important;
}

 :-moz-placeholder {
  /* Firefox 18- */
  color: blue !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form id="myForm" action="#" method="post">
  <div class="container">
    <div class="row">
      <div class="col-md-6 ">
        <input type="text" class="form-control inputCustom " placeholder="Full Name" name="fname" required="required" id="fname">
        <input type="text" class="form-control inputCustom " placeholder="Father's Name" name="lname" id="lname" required="required">
        <input type="text" class="form-control inputCustom " placeholder="Office Address" name="offAddress" id="offAddress" required="required">
        <input type="tel" class="form-control inputCustom " placeholder="Mobile Number" name="Mnum" id="Mnum" required="required">
      </div>
    </div>
  </div>
</form>

Upvotes: 2

Mukesh Ram
Mukesh Ram

Reputation: 6338

Just add place holder rules with class name

#myForm {
  background: #333;
}
.form-control.inputCustom {
  background: transparent;
}
.form-control.inputCustom::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:white;
}
.form-control.inputCustom::-moz-placeholder { /* Firefox 19+ */
  color:white;
}
.form-control.inputCustom:-ms-input-placeholder { /* IE 10+ */
  color:white;
}
.form-control.inputCustom:-moz-placeholder { /* Firefox 18- */
  color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="myForm" action="#" method="post">
    <div class="container">
        <div class="row">
            <div class="col-md-6 ">
                <input type="text" class="form-control inputCustom " placeholder="Full Name" name="fname" required="required" id="fname">
                <input type="text" class="form-control inputCustom " placeholder="Father's Name" name="lname" id="lname" required="required">
                <input type="text" class="form-control inputCustom " placeholder="Office Address" name="offAddress" id="offAddress" required="required">
                <input type="tel" class="form-control inputCustom " placeholder="Mobile Number" name="Mnum" id="Mnum" required="required">
            </div>

Upvotes: 0

Related Questions