<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.