0

我正在尝试创建一个表单，用户可以在其中选择选项，而不是使用复选框，我希望他们能够选择图像。

当他们选择图像时，他们周围可能会有一个边框，表明他们已被选中。

哪种类型的输入处理这个？

4

4 回答 4

2

由于复选框是选中/未选中的默认 HTML 行为，我会这样做：

  • 创建表单
  • 对于每张图片，在其旁边添加一个复选框
  • 使用相似的 id 命名图像和复选框（checkbox1/image1、checkbox2/image2、...）
  • 使用 Javascript 隐藏复选框
  • 将 Javascript 事件绑定到每个图像以选中/取消选中与图像关联的复选框（可以使用 ID 或通过它们在 DOM 中的位置来完成）

这将具有额外的优势，即禁用 Javascript 的人仍然可以通过单击复选框来选择图像。

于 2012-10-17T01:05:01.387 回答
0

您可以使用 jQuery 插件，http://ajaxdump.com/?0BNm4jJ0

于 2012-10-17T00:29:30.613 回答
0

解决方案 1

您可以反过来使用（仅在 chrome 中测试）:before和图像：

演示：http: //jsfiddle.net/SO_AMK/hG9Fh/

不，我不只是从头顶上输入所有的 CSS:D

CSS，这段代码纯粹是为 Chrome 构建的，在任何情况下都不兼容跨浏览器：

input[type='checkbox'] {
  -webkit-appearance: none;
  -webkit-user-select: none;
  background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
      inset 0 1px 2px rgba(255, 255, 255, 0.75);
  color: #444;
  font: inherit;
  margin: 0 1px 0 0;
  text-shadow: 0 1px 0 rgb(240, 240, 240);
}

input[type='checkbox'] {
  bottom: 2px;
  height: 13px;
  position: relative;
  vertical-align: middle;
  width: 13px;
}

input[type='checkbox']:checked::before {
  -webkit-user-select: none;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGNzdGMTE3NDA3MjA2ODExODIyQUNDRTE5M0FEN0FEQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0QjQ3OTIzNkI3NEQxMUUxODVFM0E5RkQzRkE4MDc5QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0QjQ3OTIzNUI3NEQxMUUxODVFM0E5RkQzRkE4MDc5QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjkwRTAxMTQxMjIwNjgxMTgwODNEQUM5MDc1RTIzMkQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc3RjExNzQwNzIwNjgxMTgyMkFDQ0UxOTNBRDdBREMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4TU+XQAAAAcklEQVQY02NgwA/YoJgoEA/Es4DYgJBCJSBeD8SboRinBiYg7kZS2IosyQ/Eakh8LySFq4FYHFlxGRBvBOJYqMRqJMU+yApNkSRAeC0Sux3dfSCTetE0wKyXxOWhMKhTYIr9CAUXyJMzgLgBagBBgDPGAI2LGdNt0T1AAAAAAElFTkSuQmCC');
  background-size: 100% 100%;
  content: '';
  display: block;
  height: 100%;
  width: 100%;
}

:enabled:hover:input[type='checkbox'] {
  background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
      inset 0 1px 2px rgba(255, 255, 255, 0.95);
  color: black;
}

:enabled:active:input[type='checkbox'] {
  background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  box-shadow: none;
  text-shadow: none;
}

input:disabled:[type='checkbox'] {
  opacity: .75;
}

:enabled:focus:input[type='checkbox'] {
  -webkit-transition: border-color 200ms;
  border-color: rgb(77, 144, 254);
  outline: none;
}​

解决方案 2

将复选框替换为触发它们 onclick 的图像，这里有一篇很好的文章：http ://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

于 2012-10-17T00:42:24.310 回答
0

使用按钮。您可以使用用户将看到的背景图像，并使用元素的值处理表单。

再见

于 2012-10-17T00:24:03.407 回答