<form>
  <input type="telephone" placeholder="(111) 867-5309" />
</form>
<p>For more info, see the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown">MDN docs on :placeholder-shown</a><p/>
input[type="telephone"] {
  padding: 0.25rem;
  border: 0.25rem solid;

  &:placeholder-shown {
    border-color: #999;
  }

  &:not(:placeholder-shown) {
    border-color: green;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.