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

Question

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 class="radiobox">
  <input type="radio" class="radio__input" name="radio"/>
  XS
</div>
<div class="radiobox">
  <input type="radio" class="radio__input" name="radio"/>
  S
</div>

Please revise to punctuate your sentences properly. It's very difficult to understand you. — isherwood
– isherwood, Commented Jun 24, 2022 at 16:15

Yalcin Kilic · Accepted Answer · 2022-06-24 16:26:25Z

4

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 class="radiobox">
  <input type="radio" id="s" name="radio"/>
  <label for="s">S</label>
</div>

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

edited Jun 24, 2022 at 16:26

answered Jun 24, 2022 at 16:13

Yalcin Kilic

8206 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

isherwood Over a year ago

Some explanation or introduction would make this a better answer. See How to Answer.

sarangkkl Over a year ago

Its a preety good answer but why i am seeing little bit white line from the top and left when the item is checked

Andy Over a year ago

You are kind of hiding the radio-button with the appearance property. While it seems to work currently, isn’t the none value supposed to give it a primitive appearance instead of hiding it? This might change in the future, so I guess it’s not a recommended way of hiding widgets.

Yalcin Kilic Over a year ago

@Andy I am just removing the default browser/device styles. For example when you want to customize the styling of a html button its always recommended to reset default styles first. In my case i used another workflow and styled the label but i would never recommend to hide it because in some browsers you will not be able to check it through the label when the input is hidden.

Yalcin Kilic Over a year ago

@sarangkkl maybe its because of the focus-state wich i have not styled in that example

Andy · Accepted Answer · 2022-06-24 16:10:01Z

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 class="color-options">
    <input type="radio" name="color" value="gray" id="color-gray" class="visually-hidden">
    <label class="color-option" style="background-color: gray" for="color-gray">
    <span class="visually-hidden">
    Gray
    </span>
  </label>

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

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

  </div>
</fieldset>

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related