Question

输入类型复选框不起作用，chrome显示默认复选框，而我的其他css案例工作并显示它们应该如何。

.checkbox{
border: 2px solid white !important;
background:#121f20 !important;
color:white !important;
font-family: open sans !important;
font-weight: 900 !important;
font-size: 15px !important;
padding:5px !important;    
}

HTML

<table class="tableEnd">
  <tr>
    <td class="emptyTd"> 

      <input type="checkbox"  class="checkbox" name="checkbox" value="checkbox" /> I certify that I have read and agreed to the General Terms and Agreement <br>
      <input type="checkbox" class="checkbox" name="option" value="Check" > I certify that I have read and agreed to the Acceptable Use Policy       <br>

      <input type="checkbox" class="checkbox" name="option" value="Check"> I commission  to provision services immediately. Distance selling regulations do not apply<br></td>

  </tr> 
</table>

<table class="tableEnd">
  <tr> 
    <td class="coupon">Coupon <input type="text" name="coupon" value="code"> <input class="button" type="submit" value="Submit"></td>               
    <td class="payment" ><input class="button" type="submit" value="Order"></td>
  </tr>

</table>

Answer 1

Checkbox不支持边框和填充，这就是为什么我们使用javascript / jquery插件使用自定义复选框。

有很多插件可用，例如http://www.sitepoint.com/15-jquery-radio-button-checkbox-style-plugins/

Answer 2

如果您想要对复选框旁边的文字进行样式设置，则应将其包含在label旁边的复选框中：

<label>
    <input type="checkbox"  class="checkbox" name="checkbox" value="checkbox" />
    I certify that I have read and agreed to the General Terms and Agreement
</label>

请注意我也删除了br元素。

然后，您可以将样式应用于label元素本身：

label {
    border: 2px solid white;
    background:#121f20;
    color:white;
    display: block; /* Achieves the same effect of the now-removed br element. */
    font-family: open sans;
    font-weight: 900;
    font-size: 15px;
    padding:5px; 
}

如果您想要设置实际复选框的样式，那么您需要对如何最好地实现此功能进行一些研究，因为大多数浏览器不会将任何CSS应用于复选框输入。请参阅：How to style checkbox using CSS?

Answer 3

您要更改的所有媒体资源都不会影响Chrome中的复选框。

他们没有文字，因此font-family，font-weight和font-size是无意义的。

某些浏览器（虽然我不记得长时间看到一个）支持样式border，background，color和padding的复选框，但Chrome没有。

想要设置样式的人通常会使用hack来隐藏复选框本身并更改关联的<label>元素的外观。

输入类型复选框不起作用，chrome显示默认值

3 个答案: