在悬停 CSS 时增加 checkbox/radio 按钮的大小

Question

我正在尝试制作一个视觉上可访问的主题，并希望使用 CSS

增加 hover 上 checkbox/radio 按钮的大小

我已经尝试了很多东西并且 none 它们都有效，这里是一个例子

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

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

感谢您对此的任何帮助

Answer 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>

在悬停 CSS 时增加 checkbox/radio 按钮的大小

Increase the size of checkbox/radio buttons on hover CSS

css

checkbox

hover

radio-button