<input value="Texto ingresado con value" onfocus="if(this.value=='Texto ingresado con value')this.value='';"
onblur="if(this.value=='')this.value='Texto ingresado con value';">
<input placeholder="Texto ingresado con placeholder">
input::-webkit-input-placeholder {
color: #e74c3c;
}
input:-moz-placeholder {
color: #e74c3c;
}
input:-ms-input-placeholder {
color: #e74c3c;
}
input[placeholder] {
color: #2980b9;
}
body {
background-color: #2c3e50;
}
input {
display: block;
font: 300 14px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial;
color: gray;
background: #ecf0f1;
border: 5px inset #7f8c8d;
text-shadow: 0 -1px 1px white;
box-shadow: 3px 3px 1px #34495e;
border-radius: 15px 15px 15px 15px;
width: 280px;
padding: 10px 20px;
margin: 10px auto;
outline: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.