将复选框检查图像更改为自定义图像

Posted 2023-05-08

【中文标题】将复选框检查图像更改为自定义图像

【英文标题】：Change checkbox check image to custom image

【发布时间】：2012-05-03 12:00:42

【问题描述】：

我正在尝试使用 CSS 更改复选框的默认“框图像”，但它不起作用。有没有办法解决这个问题？

.class_checkbox
    background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;

<input type="checkbox" class="class_checkbox">

【问题讨论】：

没有 javascript。您想重新表述您的问题吗？

你必须使用javascript。仅使用 html+CSS 并没有 100% 的方法来做到这一点。示例：ryanfait.com/resources/custom-checkboxes-and-radio-buttons

检查这个：previous question

这是一个纯 CSS 方式来改变你的复选框样式。我发现它非常有用，因为我已经拥有与完全相同的复选框相关的其他功能。 jotform.org/html-elements/css-checkbox-background-color

【参考方案1】：

你可以使用纯css，只需在复选框中添加一个标签，如下所示：

.check_box 
    display:none;


.check_box + label
    background:url('images/check-box.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;


.check_box:checked + label
    background:url('images/check-box-checked.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;

示例 HTML：

    .check_box 
    	display:none;
    

    .check_box + label
    	background:url('images/check-box.png') no-repeat;
    	height: 16px;
    	width: 16px;
    	display:inline-block;
        padding: 0 0 0 0px;
    

    .check_box:checked + label
        background:url('images/check-box-checked.png') no-repeat;
    	height: 16px;
    	width: 16px;
    	display:inline-block;
        padding: 0 0 0 0px;
    

<input type="checkbox" class="check_box" id="checkbox1">
<label for="checkbox1">

【讨论】：

嗨！我想知道相应的html代码是什么？是 这是标签吗？

标签必须在复选框之后。

这是最好的答案，因为它不需要破解 DOM。谢谢

能否详细说明 html 代码的外观？

@YuxiangWang 的代码是正确的，label 跟在 input 后​​面，for attr 值与 checkbox 输入标签的 id 匹配。

【参考方案2】：

试试：

<input type="checkbox" class="input_class_checkbox">

jQuery

$('.input_class_checkbox').each(function()
    $(this).hide().after('<div class="class_checkbox" />');

);

$('.class_checkbox').on('click',function()
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
);

小提琴： http://jsfiddle.net/cn6kn/

$('.input_class_checkbox').each(function()
    $(this).hide().after('<div class="class_checkbox" />');

);

$('.class_checkbox').on('click',function()
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
);

.class_checkbox 
    width: 20px;  
    height: 20px;
    background-color: red;

.class_checkbox.checked 
    background-color: green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="input_class_checkbox">

【讨论】：

所以复选框被替换为带有 action 的 div 。谢谢

是(':checked') 不是('.checked')

@AamirAfridi 查看我刚刚添加的小提琴。代码是对的。代码检查 CSS 复选框是否具有 checked 类，如果有，则将复选框上的选中属性设置为 true。

【参考方案3】：

我使用纯 CSS 创建了一个 Fiddle。 投票最多的答案不处理点击事件并且不会很好地工作，因为复选框值不会改变。

这是我的例子：

http://jsfiddle.net/kEHGN/1/

基本上，我们需要以下html：

<div class="checkbox_wrapper">
    <input type="checkbox" />
    <label></label>
</div>

还有以下 CSS：

.checkbox_wrapper
    position: relative;
    height: 16px;
    width: 17px;


input[type="checkbox"] 
    opacity:0;
    height: 16px;
    width: 17px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;


input[type="checkbox"] + label
    background:url('../images/unchecked.png') no-repeat;
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;


input[type="checkbox"]:checked + label
    background:url('../images/checked.png') no-repeat;
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;

只检查图片的路径，宽度和高度应该等于图片的宽度和高度。 在提琴手上，我使用的是 base64 编码的图像。

我希望它有用。

【讨论】：

您的标签与复选框的关联不正确。

也适用于 firefox，而 ali mokrani 的回答则不行。

【参考方案4】：

我找到了另一种方法，不使用相邻的标签或周围的 div。

我的用例是我有一个 Markdown 解析器，它可以生成那些漂亮的 TODO 列表，我想为它们设置样式。更改生成的 HTML 不是一种选择，所以我想出了这个解决方案：

给定一个这样的复选框：

<input type="checkbox" id="cb">

您可以在复选框上使用 visibility: hidden 并在 ::after 上使用 visibility: visible 设置样式，如下所示：

#cb 
  visibility: hidden;


input#cb::after 
  visibility: visible;
  content: "F";
  color: red;
  background: green;
  padding: 8px;


input#cb:checked::after 
  content: " T ";
  color: green;
  background: red;

<!doctype html>
<html>

<body>
  <input type="checkbox" id="cb">
</body>

</html>

编辑：

@connexo 在评论中指出输入元素不能有内容。可以使用标签元素轻松完成，例如像这样（如果这是错误的，请有人纠正我，我没有方便的非 webkit 浏览器来测试它）。

#cb-span * 
  visibility: hidden;


input#cb + label::after 
  visibility: visible;
  content: "F";
  color: red;
  background: green;
  padding: 8px;


input#cb:checked + label::after 
  content: " T ";
  color: green;
  background: red;

<!doctype html>
<html>

<body>
  <span id="cb-span">
    <input type="checkbox" id="cb">
    <label for="cb"></label>
  </span>
</body>

</html>

复选框与普通复选框一样工作，您可以随意设置样式。

也许它会对某些人有所帮助（我可以将其添加为书签，因为我在网络上没有找到类似的东西）

【讨论】：

这本来就不应该起作用，因为input 元素不能有content - 因此，没有::after 或::before。 Firefox 不会正确显示您的 T 和 F。

嗯，我当时在firefox上测试过，效果很好。

【参考方案5】：

也许对我的 LESS 示例有用。

<div class="custom-checkbox">
    <input component="input" type="checkbox"/>
    <label>Here is caption right to checkbox</label>
</div>

    @imgsize: 25px;
    .custom-checkbox
        position: relative;

        > input[type="checkbox"] 

        display:none;
        position: absolute;
        top: 0;
        left: 0;

            + label

                background:url('../img/unchecked.png') no-repeat 0 0;
                background-size:@imgsize;
                height: @imgsize;
                padding: 4px 0 5px 35px;
                display: inline-block;
                -webkit-transition-duration: 0.3s;
                -moz-transition-duration: 0.3s;
                transition-duration: 0.3s;        
            
        
        > input[type="checkbox"]:checked + label

            background:url('../img/checked.png') no-repeat;
            background-size:@imgsize @imgsize;