changing the style of radio button in vue js

Question

How to change the style of a radio button in vue.js that will merge the radio button and the label of the button together. I tried to change it according to this link Simple Radio Button Styling but I am unable to change it. Below is the code

<div id="product">
    <h4>{{$translate('options')}}</h4>
        <div v-for="(a,key,index) in attribute">
            <h5>{{a}}</h5>
            <v-radio-group small row v-model="selected[index]">
                <v-radio :label="v" :value="v" v-for="v in options['V'+(index+1)]" :key="v"></v-radio>
            </v-radio-group>
        </div>

I wanted to make it from this style of button

to this type of style

I really hope there is a way to solve this problem and I wanted to learn from my mistakes as I am still learning vue js

Answer 1

You can use a v-for to render any HTML code. It doesn't have to be a Vue radio button...

In this case, you need to create a wrapper for each radio button. Typically I recommend wrapping the input INSIDE the label so the entire thing becomes clickable. The following example would give you lots of styling opportunities.

<label class="radio">
   <input type="radio" name="group"/>
   <span>Label Text</span>
</label>

So in VUE you would need something like this:

<label v-for="opt in options" v-bind:key="opt.value">
   <input type="radio" v-model="opt.checked" value="opt.value" name="opt.groupName" />
   <span v-html="opt.value"></span>
</label>

The browser's default CSS should render that something like:

[ ] Label text

---

And now that I have more time here's how you could do the styling.

Assuming that you managed to get your HTML structured like I did, you have a lot of options. To make this work you're going to use the adjacent sibling selector to change things when the radio button is selected. Also since styling radio buttons themselves is difficult we're just going to hide it and use its state to determine what should happen.

.example {
  margin: 20px;
}
.example input {
  display: none;
}
.example label {
  margin-right: 20px;
  display: inline-block;
  cursor: pointer;
}

.ex1 span {
  display: block;
  padding: 5px 10px 5px 25px;
  border: 2px solid #ddd;
  border-radius: 5px;
  position: relative;
  transition: all 0.25s linear;
}
.ex1 span:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ddd;
  transition: all 0.25s linear;
}
.ex1 input:checked + span {
  background-color: #fff;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
.ex1 .red input:checked + span {
  color: red;
  border-color: red;
}
.ex1 .red input:checked + span:before {
  background-color: red;
}
.ex1 .blue input:checked + span {
  color: blue;
  border-color: blue;
}
.ex1 .blue input:checked + span:before {
  background-color: blue;
}
.ex1 .orange input:checked + span {
  color: orange;
  border-color: orange;
}
.ex1 .orange input:checked + span:before {
  background-color: orange;
}

<div class="example ex1">
	<h4>Select Color</h4>
	<label class="radio red">
		<input type="radio" name="group1"/>
		<span>Red</span>
	</label>
	<label class="radio blue">
		<input type="radio" name="group1"/>
		<span>Blue</span>
	</label>
	<label class="radio orange">
		<input type="radio" name="group1"/>
		<span>Orange</span>
	</label>
</div>