|
Сообщение от NeonMan
|
|
можно как-то при таком способе прописать вручную года?
|
атрибут data-year
css строка 18
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div{
display: flex;
width: 500px;
}
[name="line"]{
display: none;
}
label:before{
content: attr(data-year);
display: block;
width: 100px;
height: 4px;
background-color: rgba(255, 0, 255, 1);
line-height: 30px;
}
[name="line"]:checked ~ label:before{
background-color: rgba(240, 248, 255, 1);
}
label:nth-of-type(5):before{
width: 0px;
}
[name="line"]:checked + label:after{
margin-top: -6px;
content:'';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(255, 0, 255, 1);
}
</style>
</head>
<body>
<div>
<input name="line" type="radio" id="line1" ><label for="line1" data-year="100"></label>
<input name="line" type="radio" id="line2" ><label for="line2" data-year="109"></label>
<input name="line" type="radio" id="line3" checked="checked" ><label for="line3" data-year=700></label>
<input name="line" type="radio" id="line4" ><label for="line4" data-year="1"></label>
<input name="line" type="radio" id="line5" ><label for="line5" data-year="3"></label>
</div>
</body>
</html>