How can I change the field of bootstrap forms specifically the white placeholder
How can I change the field of bootstrap forms specifically the white placeholder
You can style the pseudo-element placeholder .
#input_id::placeholder {
color:white;
}
But that specification is not standard and will only work in recent browsers. (Chrome 57+, Firefox 51+, Opera 44+ and Safari 10.1 +)
To provide compatibility with previous versions (and with Internet Explorer or Edge), you will have to give it a prefix style for each browser:
::-webkit-input-placeholder /* Chrome, Opera ySafari */
::-moz-placeholder /* Firefox 19+ */
:-ms-input-placeholder /* IE 10+ y Edge */
:-moz-placeholder /* Firefox 18- */
#formGroupExampleInput {
background-color:red;
width:300px;
color:white;
}
#formGroupExampleInput::placeholder {
color:white;
}
#formGroupExampleInput::-webkit-input-placeholder {
color: white;
}
#formGroupExampleInput::-moz-placeholder {
color: white;
}
#formGroupExampleInput:-ms-input-placeholder {
color: white;
}
#formGroupExampleInput:-moz-placeholder {
color: white;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group">
<label for="formGroupExampleInput">Primer Nombre</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Primer Nombre">
</div>You probably want the placeholder to be slightly darker to differentiate it from the text entered.
<html>
<head>
<style>
input{
background: skyblue;
}
#pnombre::placeholder {
color: blue;
}
#snombre::placeholder{
color: white;
}
</style>
</head>
<body>
<form>
<input type"text" id="pnombre" placeholder="primer nombre">
<input type"text" id="snombre" placeholder="segundo nombre">
</form>
</body>
</html>Only place:
<html>
<head>
<style>
#pnombre {
background-color: blue;
}
#snombre{
background-color: white;
}
</style>
</head>
<body>
<form>
<input type"text" id="pnombre" placeholder="primer nombre">
<input type"text" id="snombre" placeholder="segundo nombre">
</form>
</body>
</html>You can use the CSS placeholder pseudo selector
::placeholder{
color: white;
}
input{
background-color: orange;
color: white;
}
::placeholder{
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="hola mundo">Greetings