css - 在vue js中更改单选按钮的样式

Question

如何在 vue.js 中更改单选按钮的样式，将单选按钮和按钮的标签合并在一起。我尝试根据此链接更改它 Simple Radio Button Styling但我无法改变它。下面是代码

<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>

我想用这种风格的按钮来制作它

这种风格

我真的希望有办法解决这个问题，我想从我的错误中吸取教训，因为我还在学习 vue js

Answer 1

您可以使用 v-for 来呈现任何 HTML 代码。它不一定是 Vue 单选按钮...

在这种情况下，您需要为每个单选按钮创建一个包装器。通常我建议将输入包裹在标签内，这样整个内容就可以点击了。以下示例将为您提供很多造型机会。

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

所以在 VUE 中你需要这样的东西:

<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>

浏览器的默认 CSS 应该呈现如下内容:

[ ] 标签文字

---

现在我有更多时间了，这里是您如何进行样式设置的方法。

假设您像我一样成功构建了 HTML 结构，那么您有很多选择。要完成这项工作，您将使用 adjacent sibling 选择器在单选按钮被选中时进行更改。此外，由于样式单选按钮本身很困难，我们只是将其隐藏并使用其状态来确定应该发生什么。

.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>