增加悬停 CSS 上的复选框/单选按钮的大小 [关闭]答案

【问题标题】：Increase the size of checkbox/radio buttons on hover CSS [closed]增加悬停 CSS 上的复选框/单选按钮的大小 [关闭]
【发布时间】：2021-05-11 05:26:01
【问题描述】：

我正在尝试制作一个视觉可访问的主题，并希望使用 CSS 增加 hover 上的复选框/单选按钮的大小

我尝试了很多东西，但都没有奏效，这是一个例子

.checkbox input[type="checkbox"] + label span:hover {
    width: 40px !important;
    height: 40px !important; 
}

这是我正在处理的页面 https://sum-app.net/members/Ubb3K1alaMRloph_-7eI0w/survey

感谢您对此的任何帮助

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
请注意，该 CSS 代码中使用的选择器选择悬停的span，它是一个标签的后代，该标签是复选框的兄弟，复选框是具有“复选框”类的元素的后代”。所以最终变成 40px x 40px 的元素是 span 中的 label，而不是复选框...
您好，我在您提供的链接中看到的代码中没有跨度。而且您可能希望允许用户将鼠标悬停在 div.checkbox 中的任何位置并将整个内容放大，以便很容易看出这是一个可访问性问题，因此请尝试 .checkbox:hover { transform: scale(1.5); }

标签： css checkbox radio-button hover

【解决方案1】：

这样的事情应该可以工作。

input[type=checkbox]:hover {
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
}

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="submit" value="Submit">
</form>

【讨论】：

请注意，您可以使用Stack Snippets（在编辑器工具栏中的图标看起来像<>）提供一个不依赖外部站点的工作示例，这样用户就不必去其他地方了查看 CSS 的实际效果。此外，不再需要供应商前缀（包括 IE 自版本 10 起）。
@HereticMonkey 感谢您的推荐。如果没有供应商前缀，我无法让它工作，但确实让 Snippet 工作