Question

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

我尝试了很多东西，但都不起作用，这是一个例子

.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 上复选框/单选按钮的大小

1 个答案: