如何让Textual.io RadioSet组件的选中选项更突出？

原生单选框的默认样式被浏览器封装得比较死，直接改width、height、color大多没效果，给你两个实用方案来强化选中项的区分度：

方案一：自定义单选框样式（完全可控） #

把原生单选框隐藏，用label的伪元素模拟按钮，这样能随便调样式：

/* 隐藏原生单选框 */
.radio-input {
  display: none;
}

/* 给label加定位，用来放自定义按钮 */
.radio-label {
  position: relative;
  padding-left: 24px;
  cursor: pointer;
}

/* 未选中的自定义圆形按钮 */
.radio-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background: #fff;
}

/* 选中时的按钮样式：边框+填充色都换 */
.radio-input:checked + .radio-label::before {
  border-color: #2563eb;
  background: #2563eb;
}

/* 可选：加个白色小圆点，让选中状态更明显 */
.radio-input:checked + .radio-label::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

方案二：强化原生单选框的选中状态 #

不想自定义的话，用accent-color直接改选中色，再给对应的label加样式：

/* 直接修改选中单选框的颜色 */
.radio-set input[type="radio"]:checked {
  accent-color: #2563eb;
}

/* 给选中项的文字加粗、变色，进一步强化区分 */
.radio-set input[type="radio"]:checked + label {
  font-weight: bold;
  color: #2563eb;
}

/* 可选：聚焦时加外框，提升可访问性 */
.radio-set input[type="radio"]:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

小提醒 #

如果是Titanium的RadioSet组件，要注意选择器的层级，比如得用.radio-option input这类具体的子元素选择器，才能精准定位到单选框。

内容的提问来源于stack exchange，提问作者S.R.