28

我试图在几页上将复选框的大小加倍。如何在 CSS 中实现这一点？我不想为悬停设置样式。

想法？

4

9 回答 9

44

要将复选框的大小加倍，您可以使用 CSS scale 属性。(2,2) 表示原始宽度的 2 倍和高度的 2 倍，但这会非常大。

input[type="checkbox"] {
  transform:scale(2, 2);
}

您也可以使用十进制值，只是稍微大一点的复选框。

input[type="checkbox"] {
      transform:scale(1.3, 1.3);
    }
于 2015-03-31T02:07:02.847 回答
12

这行得通。它使用相对大小，因此它可以根据您当前的字体大小进行缩放。

input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
}

不过，您可能需要调整边距。

于 2017-09-20T20:28:38.767 回答
11

样式化复选框是有风险的事情。这是似乎永远无法与所有浏览器一致的事情之一。

或者你可以试试

 style="zoom:1.2"

jQuery 提供了一个插件来替换复选框

于 2012-11-29T17:42:41.067 回答
10

您总是可以使用复选框 hack 来制作您自己的复选框。这允许更多跨浏览器兼容的解决方案。

我在这里做了一个快速演示，显然你必须得到一个透明的.png，而不是我得到的那个。

input[type=checkbox]:checked ~ div label{
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}


input {
  display: none;
}

label input[type=checkbox] ~ span {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background: #fff;
  border: 1px solid #888;
  padding: 1px;
  height: 20px;
  width: 20px;
}

label input[type=checkbox]:checked ~ span {
  /* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
  background-size: 100%;
}
<label>
  Click me:
  <input type="checkbox" />
  <span></span>
</label>

于 2012-11-29T17:57:38.890 回答
3

我认为你能做的最好的就是给它更大的字体大小。从那里开始取决于浏览器如何处理它，除非您制作一个控制隐藏复选框的模拟 div 元素。它并没有扩大那么多。

input[type="checkbox"] {
  font-size: 50px;
}
于 2012-11-29T17:52:17.557 回答
1

我已经成功使用了这个库

http://plugins.krajee.com/checkbox-x

它需要 jQuery 和 bootstrap 3.x

在此处下载 zip：https ://github.com/kartik-v/bootstrap-checkbox-x/zipball/master

将 zip 的内容放在项目中的文件夹中

在标题中弹出所需的库

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>

使用 data-size="xl" 将数据控件添加到元素以更改大小，如下所示http://plugins.krajee.com/cbx-sizes-demo

<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>

如果您浏览插件站点，还有许多其他功能。

于 2016-04-22T18:03:44.343 回答
0

样式复选框是一个非常奇怪的世界，完全解决了跨浏览器问题。更多信息可以在这里找到http://www.456bereastreet.com/lab/form_controls/checkboxes/您也可以使用 javascript 创建自己的，但这对于用户可访问性来说不是很好。

所以我会尽可能避免改变。

于 2012-11-29T17:44:44.853 回答
0

只需将背景图像添加到复选框。并根据需要调整尺寸。

下面的代码在选中时会自动添加背景，并且在未选中状态下大小保持不变。

无需指定如下：

input[type=checkbox]:checked

或者

input[type=checkbox]:checked ~ div label

例如，所有复选框：

input[type="checkbox"]{
  background: url('http://refundfx.com.au/uploads/image/checkbox_full.png');
  background-size: 20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  margin: 0;
}

在这里看小提琴。

于 2016-07-27T05:20:45.437 回答
-1

或者简单地使用这样的高度和宽度来设置它：

<input style="height: 26px; width:26px; margin-left:-30px" value="" type="checkbox">

PS。我已经将它与引导程序和“checkbox-inline”类一起使用

于 2016-05-18T19:55:07.220 回答