<p>Вибери потрібне значення для <code>outline-color</code>:</p>
<input type="color" class="input" id="val" onchange="change(this.value)"></input>
<div id="block"></div>
body {
padding: 36px;
text-align: center;
line-height: 1.45;
font-size: 20px;
font-family: sans-serif;
counter-reset: chapter 2;
}
.input {
margin-bottom: 16px;
padding: 1px;
font-size: 13px;
}
#block {
padding: 36px;
width: 275px;
margin: 75px auto 0 auto;
border: 8px solid #666;
outline: 16px solid #000;
transition: all .15s ease-in;
}
function change(val) {
block.style.outlineColor = val;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.