how it is actually coded, using buttons and input result, but works with just a single choice

i still have little experience with this, but the result i want to achieve is multiple choice between days of the week and a single choice on weekly frequency written so i can use this data via js in a page who add more "day-container" with the selecter inputs from the buttons.

In advance, thanks for your dedication!

I've tried using radio and checkbox, but i were not capable of stylizing it as buttons and include the text inside of the actual box, as i wrote i had not that much experience in this but i'm a fast learner

CodePudding user response：

never change the html because of style, there is always a way to style things the way you want, if you want to make your radio buttons look like a button all you need to do is change the styling. if you want don't want to show the dot you can set the radio input to opacity:0.001; or appearance: none

.day-selector label{
    border-style: solid;
    width:200px;
}
.day-selector label:hover {
    background: red;
}
.day-selector input[type="radio"] {
    appearance: none;
}
    
.day-selector input[type="radio"]:checked   label {
    background:yellow;
}

i found this example from another post stackoverflow