پیشنمایش زنده
کد HTML
<div class="days-btn-container">
<input class="day-btn" id="sunday" type="checkbox" checked="false" />
<label class="day-label" for="sunday">S</label>
<input class="day-btn" id="monday" type="checkbox" checked="false" />
<label class="day-label" for="monday">M</label>
<input class="day-btn" id="tuesday" type="checkbox" checked="false" />
<label class="day-label" for="tuesday">T</label>
<input class="day-btn" id="wednesday" type="checkbox" checked="false" />
<label class="day-label" for="wednesday">W</label>
<input class="day-btn" id="thursday" type="checkbox" checked="false" />
<label class="day-label" for="thursday">T</label>
<input class="day-btn" id="friday" type="checkbox" checked="false" />
<label class="day-label" for="friday">F</label>
<input class="day-btn" id="saturday" type="checkbox" checked="false" />
<label class="day-label" for="saturday">S</label>
</div>
کد CSS
.days-btn-container {
display: flex;
width: 300px;
align-items: center;
justify-content: space-evenly;
height: 34px;
}
.day-btn {
display: none; /* Hide the original checkbox */
}
.day-label {
background-color: transparent;
font-size: 11px;
font-weight: 600;
color: #008cff;
cursor: pointer;
border: 2px solid #008cff;
border-radius: 20%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}
/* Apply styles for the selected state */
.day-btn:checked + .day-label {
background-color: #008cff;
background-image: linear-gradient(147deg, #00ccff 0%, #004cff 74%);
border: none;
color: white;
}