访客的非活动HTML开关

我想在我的网页上添加一个HTML开关，但问题是-我想查看我的开关状态，所以访问者不能更改它，只能查看

我有这个：

.onoffswitch{
位置：相对；宽度：122px；
-webkit用户选择：无；-moz用户选择：无；-ms用户选择：无；
}
.onoffswitch复选框{
显示：无；
}
.ONOFF开关标签{
显示：块；溢出：隐藏；光标：指针；
边框：2px实心#FFFFFF；边框半径：20px；
}
.ONOFF开关内部{
显示：块；宽度：200%；左边距：-100%；
过渡：0秒时，边距为0.3秒；
}
.onoffswitch内部：之前，.onoffswitch内部：之后{
显示：块；浮动：左；宽度：50%；高度：26px；填充：0；线宽：26px；
字体大小：14px；颜色：白色；字体系列：投石机，Arial，无衬线；字体大小：粗体；
框大小：边框框；
}
.ONOFF开关内部：之前{
内容：“otevreno”；
左侧填充：12px；
背景色：#34C258；颜色：#000000；
}
.ONOFF开关内部：之后{
内容：“扎夫雷诺”；
右侧填充：12px；
背景色：#D16464；颜色：#000000；
文本对齐：右对齐；
}
.ONOFF开关{
显示：块；宽度：5px；边距：10.5px；
背景：#FFFFFF；
位置：绝对；顶部：0；底部：0；
右：92px；
边框：2px实心#FFFFFF；边框半径：20px；
过渡：所有0.3秒在0秒内轻松过渡；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部{
左边距：0；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch开关{
右：0px；
}

---

将

禁用的

添加到您的

输入

标签中

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" disabled>

---

代码片段：

.onoffswitch{
位置：相对位置；
宽度：122px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
}
.onoffswitch复选框{
显示：无；
}
.ONOFF开关标签{
显示：块；
溢出：隐藏；
光标：指针；
边框：2个实心#FFFFFF；
边界半径：20px；
}
.ONOFF开关内部{
显示：块；
宽度：200%；
左边距：-100%；
过渡：0秒时，边距为0.3秒；
}
.ONOFF开关内部：之前，
.ONOFF开关内部：之后{
显示：块；
浮动：左；
宽度：50%；
高度：26px；
填充：0；
线高：26px；
字体大小：14px；
颜色：白色；
字体系列：投石机，Arial，无衬线；
字体大小：粗体；
框大小：边框框；
}
.ONOFF开关内部：之前{
内容：“otevreno”；
左侧填充：12px；
背景色：#34C258；
颜色：#000000；
}
.ONOFF开关内部：之后{
内容：“扎夫雷诺”；
右侧填充：12px；
背景色：#D16464；
颜色：#000000；
文本对齐：右对齐；
}
.ONOFF开关{
显示：块；
宽度：5px；
利润率：10.5px；
背景：透明；
位置：绝对位置；
排名：0；
底部：0；
右：92px；
边框：2倍实心透明；
边界半径：20px；
过渡：所有0.3秒在0秒内轻松过渡；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部{
左边距：0；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch开关{
右：0px；
}

我认为您应该能够将

readonly

属性添加到输入？只是

readonly

，而不是

readonly=“etc”

。还应该指出此按钮已禁用，因为如果不禁用，人们会认为您的网站已损坏，这永远都不是真的。但根据要求，我提出了一个解决方案：-）普加什：是的，就是这样！最后一个可能是愚蠢的问题，现在，如果我想切换它，我必须在代码中重写一些东西，对吗？对不起，我不知道该重写什么，我只是个初学者。谢谢你的建议。您可以将选中的

添加到
输入标记中。如果删除
选中的
属性，则该值将更改回原来的值。例如，

.onoffswitch-switch {
  display: block;
  width: 5px;
  margin: 10.5px;
  background: transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 92px;
  border: 2px solid transparent;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}