Placeholder color will not change
My placeholder color is not being applied, I know how to change the input placeholder color, but in this code it does not allow me to change the color
can anyone help?
form {
background-color: #4CAF50;
padding: 30px;
color: #fff;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #4CAF50;
}
:-moz-placeholder {
/* Firefox 18- */
color: #4CAF50;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" placeholder="Email address" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Password" id="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
+3
source to share
4 answers
You need to override bootstrap
css, make css inheritance stronger than bootstrap css
form {
background-color: #4CAF50;
padding: 30px;
color: #fff;
}
form .form-control::-webkit-input-placeholder {
color: #4CAF50;
}
form .form-control::-moz-placeholder {
color: #4CAF50;
}
form .form-control:-ms-input-placeholder {
color: #4CAF50;
}
form .form-control:placeholder {
color: #4CAF50;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" placeholder="Email address" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Password" id="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
+5
source to share
You can add essential to CSS because sometimes it is overwritten by user agent styles
form {
background-color: #4CAF50;
padding: 30px;
color: #fff;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #4CAF50 !important;
}
:-moz-placeholder {
/* Firefox 18- */
color: #4CAF50 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" placeholder="Email address" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Password" id="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
0
source to share
I think it's because of Bootstrap! Recording
color: #4CAF50 !important;
work.
Note that you must define :-moz-placeholder
and ::-moz-placeholder
(note the additional one :
) for it to work in every version of Firefox:
form {
background-color: #4CAF50;
padding: 30px;
color: #fff;
}
form .form-control::-webkit-input-placeholder {
color: #4CAF50;
}
:-moz-placeholder {
color: #4CAF50 !important;
}
::-moz-placeholder {
color: #4CAF50 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" placeholder="Email address" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Password" id="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
0
source to share