how to create a custom Input radio button which have attributes inside it-CodePudding

I am using react styled components as styling in my project ok let me point out what actually i am feeling not right is the text between the box and also need to style it if it is checked

what i have tried ?

I craeted a outer div and inside it i put radio input which i display none and thought i can style the outer element but that make the radio button not clickable any solution to this problem if you present react specific solution will be great.

.radio__input{
  display:none;
}

.radiobox{
  width:60px;
  height:60px;
  border:1px solid black;
}

//i want the div radiobox to styled when one radiobox is selected

<div >
  <input type="radio"  name="radio"/>
  XS
</div>
<div >
  <input type="radio"  name="radio"/>
  S
</div>

CodePudding user response：

You need to keep the radio button somewhere, for the sake of accessibility, and to still be able to select it.

A common solution to styling radio buttons is to style their <label> element instead, and use the CSS Adjacent sibling combinator to style it depending on the radio button’s state.

Some more things should be taken into account to make the component accessible to users who need assistive technology:

you should also use <fieldset> to provide an accessible name to the option group, even though “Green” might be self-explanatory
focus needs to be visible, and since you are hiding the radio button itself, one solution is to show it on the fieldset
each radio button still needs an accessible name, so add some hidden text also inside the labels

.color-options {
  display: flex;
  padding: .2em;
  gap: .4em;
}

.color-options:focus-within {
  outline: .2em solid blue;
}

.color-option {
  width: 2em;
  height: 2em;
}

input:checked .color-option {
  outline: .2em solid darkseagreen;
}

/* kudos to  Scott O'Hara 
   https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

<fieldset>
  <legend>Color</legend>

  <div >
    <input type="radio" name="color" value="gray" id="color-gray" >
    <label  style="background-color: gray" for="color-gray">
    <span >
    Gray
    </span>
  </label>

    <input type="radio" name="color" value="black" id="color-black" >
    <label  style="background-color: black" for="color-black">
    <span >
    Black
    </span>
  </label>

    <input type="radio" name="color" value="darkgreen" id="color-darkgreen" >
    <label  style="background-color: darkgreen" for="color-darkgreen">
    <span >
    Dark Green
    </span>
  </label>

  </div>
</fieldset>

CodePudding user response：

I used unique ids for every radio button, which is used by the <label> element's for attribute to associate the labels with the radio buttons. So now the input is also checked when the label is clicked. Then i just styled the initial and checked state. But remember that you can only style elements according to the checked state of an input when they are a sibling or children. You can't access the parent element like in this case the .radiobox container with pure css.

.radiobox {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-block;
  
}

input[type="radio"] {
  appearance: none;
}

input[type="radio"]   label {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type="radio"]:checked   label {
  background: blue;
}

<div >
  <input type="radio" id="s" name="radio"/>
  <label for="s">S</label>
</div>

<div >
  <input type="radio" id="m" name="radio"/>
  <label for="m">M</label>
</div>