超酷的HTML选项复选框

一个下拉菜单不能代替许多复选框/单选按钮吗?您可以启用多个选项来重新填写复选框行为。一般来说,如果我在同一主题上有一个或两个以上的复选框,我会这样做。。。

或者你是说他们是关于不同的事情?在这种情况下,你能发布一些你想从用户那里得到什么信息的想法吗?

这是一项比更改编辑字段边框稍微更高级的任务。最好的方法是隐藏checkbox/radiobutton并用一个虚拟元素替换它。这种方法的问题是保持两个元素同步。单选按钮图像需要知道何时检查了另一个单选按钮等。这需要一些高级事件乒乓。对于复选框(未测试),您可以这样做:

$(':checkbox').each(function () {
   var checkbox = $(this),
      fakebox = $(document.createElement('span')).addClass('custom-checkbox');

   // toggle and trigger update of the real checkbox
   fakebox.click(function () {
      checkbox.attr('checked', !checkbox.attr('checked')).change();
   });

   // changes to the real checkbox causes the fake checkbox to update its status
   checkbox.change(function () {
      if (checkbox.attr('checked')) {
         fakebox.addClass('custom-checkbox-checked');
      } else {
         fakebox.removeClass('custom-checkbox-checked');
      }
   });

   // initialize
   checkbox.change().hide();
   fakebox.insertAfter(checkbox);
});

您始终可以使用CSS(就像按钮等任何其他表单元素一样)重新设置复选框/单选按钮的外观。