<form>
  
  <input type="text" placeholder="Placeholder text" value="Currently has a value (not showing placeholder).">
  
  <input type="text" placeholder="Currently has no value (showing placeholder).">
  
</form>
  
input {
  font-size: 1.5rem;
  margin: 10px;
  padding: 10px;
  width: 65%;
}
input:placeholder-shown {
  border: 5px solid red;
}



html, body {
  background: #333;
}

body {
  padding-top: 4em;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.