.top-select { label { display: inline-flex; align-items: center; } input[type="radio"] { margin-right: 12px; } } 怎么把input type="radio" 的选中变成红色

你可以在 .top-select 中添加以下 CSS 代码来改变 input type="radio" 选中时的颜色为红色：

input[type="radio"]:checked {
  color: red;
}

如果你想要改变选中时的背景色为红色，可以使用以下代码：

input[type="radio"]:checked + label {
  background-color: red;
}

相关问题

<el-select v-model="form.productAttr" placeholder="框架类型" clearable style="width:200px;" > <!-- style="width: 200px;display:flex;flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: center;" --> <el-option v-for="dict in productAttr" :key="dict.value" :label="dict.label" :value="dict.value" style="width:90px;margin-left:5px;margin-right:5px;display:inline-block;text-align: center;" /> </el-select>帮我改成，每三个el-option在同一列

<-select
v-model="form.productAttr"
placeholder="框架类型"
clearable
style="width:200px;"
>
<template v-for="(dict, index) in productAttr">
<el-option
:key="dict.value"
:label="dict.label"
:value="dict.value"
:style="{
'width': '90px',
'margin-left': index % 3 === 0 ? '0' : '5px',
'margin-right': index % 3 === 2 ? '0' : '5px',
'display': 'inline-block',
'text-align': 'center'
}"
/>
</template>
</el-select>

htlml：<div class="date-selector"> <select id="year"></select> <select id="month"></select> <select id="day"></select> </div> css：.date-selector { display: flex; flex-wrap: wrap; gap: 10px; } .date-selector select { padding: 5px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; }

好的，以下是修改后的 CSS 样式代码：

.date-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.date-selector select {
  padding: 10px;
  font-size: 18px;
  border: 2px solid #ccc;
  border-radius: 10px;
  outline: none;
}

.date-selector select:focus {
  border-color: #6c63ff;
  box-shadow: 0 0 5px #6c63ff;
}

我主要是增加了一些样式，使得选择框更加美观和易用。其中：

- `justify-content: center;` 和 `align-items: center;` 用于水平和垂直居中选择框。
- `margin-top: 20px;` 用于在选择框上方增加一些间距，让整个样式更加舒适。
- `padding: 10px;` 和 `font-size: 18px;` 使得选择框更加易用，字体更加清晰。
- `border: 2px solid #ccc;` 和 `border-radius: 10px;` 使得选择框更加美观。
- `outline: none;` 用于去除选择框获得焦点时的默认边框。
- `select:focus` 用于设置选择框获得焦点时的样式，让用户更加清晰地知道当前选择框处于获得焦点的状态。