<form>
  <dl>
    <dt><i>URL:</i></dt>
    <dd><input type="url" placeholder="https://...." required></dd>
  </dl>

</form>
input:invalid {
  background: red;
}

input:valid {
  background: green;
}

input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  padding: 15px;
  box-sizing: border-box;
}

input[type="submit"] {
  cursor: pointer;
  border: none;
  outline: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  display: block;
}

dt {
  display: table-cell;
  vertical-align: middle;
  width: 40%;
  width: 200px;
  text-align: right;
  padding: 0 16px;
}

dd {
  display: table-cell;
  vertical-align: top;
}

i {
  padding: 0 5px;
  margin-right: 10px;
  overflow: hidden;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.