0

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

Accademia Facile
  • 3
  • 2
  • Provide a basic working example of what you tried please. – Levidps Dec 17 '22 at 03:02
  • Welcome to Stackoverflow. Please add codes as text in the questions/answers please read [this](https://stackoverflow.com/help/formatting) – MD Zand Dec 18 '22 at 08:09

1 Answers1

0

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

Frank Xie
  • 16
  • 1
  • https://i.imgur.com/Dof12xP.png my goal is to write an html/css structure that makes it possible to perform the operation that is shown in the screenshot I just linked, unfortunately your solution didn't help because it doesn't allow me to select multiple options at the same time in the section of the days, and a single in the section of the week, I hope I have been more exhaustive than the previous message and thanks. https://www.filemail.com/d/cfvlwdyghvfcela here is the zip with all the code in it for test purpouses if you want to watch in it – Accademia Facile Dec 17 '22 at 16:02
  • Just change input type to checkbox. If you want only 1 option selected at a time use radio if you want the ability for multiple options to be selected use – Frank Xie Dec 18 '22 at 20:11