input[type='checkbox']{ -webkit-appearance: checkbox; background-color: pink; } input[type="checkbox"]:checked { background-color: lightgreen!important; }我这样修改样式不管用怎么回事

你的CSS样式表代码看起来没有问题，但是可能由于浏览器的默认样式或者其他CSS样式表的样式优先级比较高，导致样式修改不起作用。你可以尝试使用以下方法解决问题：

1. 添加`!important`关键字：在样式属性后面添加`!important`关键字可以强制覆盖其他样式，例如：

input[type='checkbox'] {
  -webkit-appearance: checkbox;
  background-color: pink !important;
}

2. 检查样式优先级：如果其他样式表中的样式优先级比较高，你可以使用更具体的CSS选择器或者提高样式的优先级，例如：

body input[type='checkbox'] {
  -webkit-appearance: checkbox;
  background-color: pink;
}

3. 检查浏览器兼容性：部分浏览器可能不支持某些CSS属性，你可以使用浏览器兼容性前缀或者更换其他属性，例如：

input[type='checkbox'] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  background-color: pink;
}

以上方法可以帮助你解决多选框样式修改不起作用的问题。如果问题仍然存在，请提供更多信息，以便我能够更好地帮助你解决问题。

相关问题

<tr> <td>爱好</td> <td > <input name="like" type="checkbox" value="0" checked="true"/>读书 <input name="like" type="checkbox" value="0" checked="true"/>听歌 <input name="like" type="checkbox" value="0"/>手游 <input name="like" type="checkbox" value="0"/>体育 <input name="all" type="checkbox" value="0"/>全选 </td> </tr>为以上代码添加<tr> <td>爱好</td> <td > <input name="like" type="checkbox" value="0" checked="true"/>读书 <input name="like" type="checkbox" value="0" checked="true"/>听歌 <input name="like" type="checkbox" value="0"/>手游 <input name="like" type="checkbox" value="0"/>体育 <input name="all" type="checkbox" value="0"/>全选 </td> </tr>

你所提供的代码已经是一个表格行（`<tr>`）了，如果你想添加多行，可以在表格中添加多个类似的行，每个行中的复选框可以设置不同的 `name` 属性值，这样就可以在表单提交时分别获取各个复选框的值。同时，可以通过 jQuery 实现全选或取消全选的功能，具体的实现方法可以参考我之前回答的问题。下面是示例代码：

HTML:

<table>
  <tr>
    <td>爱好</td>
    <td>
      <input name="like" type="checkbox" value="0" checked="true">读书
      <input name="like" type="checkbox" value="1" checked="true">听歌
      <input name="like" type="checkbox" value="2">手游
      <input name="like" type="checkbox" value="3">体育
      <input name="all" type="checkbox" value="0">全选
    </td>
  </tr>
  <tr>
    <td>兴趣爱好</td>
    <td>
      <input name="interest" type="checkbox" value="0" checked="true">旅游
      <input name="interest" type="checkbox" value="1" checked="true">美食
      <input name="interest" type="checkbox" value="2">摄影
      <input name="interest" type="checkbox" value="3">绘画
      <input name="all" type="checkbox" value="1">全选
    </td>
  </tr>
</table>

JavaScript:

$(function() {
  // 给全选复选框绑定 click 事件
  $('input[name="all"]').on('click', function() {
    var $items = $(this).closest('td').find('input[type="checkbox"]');
    $items.prop('checked', $(this).prop('checked'));
  });
});

这样，当用户点击任意一个全选复选框时，就可以实现对该行中所有复选框的全选或取消全选操作了。

我想把以下代码呈现出来的复选框放在同一行该如何修改<div class="form-check form-check-inline retail"> <label class="custom-control custom-checkbox "> <input type="checkbox" class="custom-control-label" checked> <span class="custom-control-label"> WEB操作 </span> </label> </div> <div class="form-check form-check-inline retail"> <label class="custom-control custom-checkbox "> <input type="checkbox" class="custom-control-label" checked> <span class="custom-control-label"> API操作 </span> </label> </div>

要将这两个复选框放在同一行，可以通过以下方式修改代码：

<div class="form-check form-check-inline retail">
    <label class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" checked>
        <span class="custom-control-label">WEB操作</span>
    </label>
</div>

<div class="form-check form-check-inline retail">
    <label class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" checked>
        <span class="custom-control-label">API操作</span>
    </label>
</div>

修改的地方是将`class`属性从`custom-control-label`改为`custom-control-input`，这样复选框的样式将应用到`input`元素上。同时，将`<span>`标签的结束标签移到了复选框的后面。

这样修改后，两个复选框将以内联方式显示在同一行上。