<div>
<p>Перелік</p>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<label for="select">Задати колір нижнього кордону: </label>
<select class="input" id="select">
<option value="currentColor" name="color" selected>currentColor</option>
<option value="coral" name="color">coral</option>
<option value="cyan" name="color">cyan</option>
</select>
</div>
body {
color: blue;
}
div {
padding: 30px;
width: 300px;
height: 300px;
border: 5px solid;
}
p {
font-size: 30px;
width: 80%;
}
li {
margin: 10px;
padding: 10px 0;
color: green;
display: inline-block;
position: relative;
border-bottom: 3px solid currentColor;
}
li:hover{
color: red;
}
ul{
list-style: none;
}
.input{
font-size: 16px;
}
label{
display: inline-block;
margin-bottom: 10px;
}$('#select').on('change', function() {
var color = $(this).find(":selected").val();
$('li').css( 'border-color', color );
});
External CSS
This Pen doesn't use any external CSS resources.