3状态CSS拨动开关 [英] 3 State CSS Toggle Switch

问题描述

我一直在寻找3状态拨动开关，但是运气不太好.

I have been looking around for a 3 state toggle switch but haven't had much luck.

基本上，我需要一个具有以下状态的开关: |开| N/A |关闭|

Basically I need a switch that has the states: | ON | N/A | OFF |

默认情况下，滑块从中间开始，一旦用户向左或向右滑动，他们就无法回到N/A(未回答)状态.

The slider by default starts in the middle, and once the user slides to left or right, they can't go back to the N/A (not answered) state.

有人知道如何处理吗?

推荐答案

尝试如下操作:

.switch-toggle {
  width: 10em;
}

.switch-toggle label:not(.disabled) {
  cursor: pointer;
}

<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" />

<div class="switch-toggle switch-3 switch-candy">
  <input id="on" name="state-d" type="radio" checked="" />
  <label for="on" onclick="">ON</label>

  <input id="na" name="state-d" type="radio" disabled checked="checked" />
  <label for="na" class="disabled" onclick="">&nbsp;</label>

  <input id="off" name="state-d" type="radio" />
  <label for="off" onclick="">OFF</label>

  <a></a>
</div>

这将以N/A作为默认选项(通过checked="checked")开始，但是稍后使其变为不可选择状态(通过使用disabled)

This will start with N/A as the default option (via checked="checked"), but make it unselectable later (by using disabled)

JSFiddle演示 (简体)

JSFiddle Demo (Simplified)

这篇关于3状态CSS拨动开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！