CSS如何设置自定义复选框刻度符号的“内容” /“背景”属性的样式？

debugcn 发表于 Dev

亚历克斯

我创建了一个自定义复选框，一切正常。我想知道是否有样式\操纵contentorbackground属性的选项。我使用了自定义刻度线符号，但它在底部的位置过多，如何将其提高几个像素？
所需结果：

HTML：

        <input type='checkbox' value='valuable4' id="valuable4"/>
        <label for="valuable4">
            <span></span>
        </label>

CSS：

input[type=checkbox] {
    visibility: hidden;
}

label span
{
    height: 25px;
    width: 25px;
    position: absolute;

    left: 107px;
    cursor: pointer;
    border: 1px solid lightblue;
}
input[type=checkbox]:checked + label span
{
    content: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
    height: 25px;
    width: 25px;
    cursor: pointer;
     border: 1px solid red;
}

Connexo

现在，这应该正是您要寻找的。您可以安全地省略<span>，它是不需要的。

input[type=checkbox] {
    display: none;
}
label {
    height: 25px;
    width: 25px;
    position: absolute;
    display: block;
    left: 107px;
    cursor: pointer;
    border: 1px solid lightblue;
}
input[type=checkbox]:checked + label {
    border: 1px solid red;
}
input[type=checkbox] + label:after {
    background: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
    background-size: cover;
    content:" ";
    display: block;
    opacity: 0;
    height: 30px;
    transition-duration: 0.2s;
    width: 30px;
    position: relative;
    right: -4px;
    top: -8px;
}
input[type=checkbox]:checked + label:after {
    opacity: 1;
}

http://jsfiddle.net/39qkjs6k/5/

这里发生了什么事？基本上，您将创建一个伪元素（大多数html元素上都可用）:after，并将其应用于background（替换<span>之前使用的）。您将其相对放置在其父对象内部<label> right: -4px; top: -8px;。取消选中该复选框时，它具有opacity: 0;，因此它是完全透明的，使其不可见。在:checked复选框旁边，它变为opacity: 1;，使其完全可见。这样transition-duration: 0.2s;可以确保所有可转换属性的更改均以平滑的动画进行，而不仅仅是突然更改。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-11

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

CSS如何设置自定义复选框刻度符号的“内容” /“背景”属性的样式？

CSS如何设置自定义复选框刻度符号的“内容” /“背景”属性的样式？

定义自定义复选框样式

如何在自定义复选框视图中保留支持库复选框的样式？

自定义CSS复选框jQuery引起的“ checked”属性在视觉上无法“选中”复选框

使用Switchery设置样式的自定义复选框输入组件

设置自定义背景时，android复选框文本消失

如何自定义处于不确定状态的复选框的样式？

如何为复选框图像创建自定义WPF XAML样式

使用Javascript获取复选框的自定义属性

自定义CSS复选框仅在标签具有“ for”属性时有效

如何使用很棒的字体设置CSS复选框的样式

如何使用 setStyle() 内联设置复选框的 css 样式

jQuery：如何获取背景图像样式属性的长度？

使用KnockoutJS的“自定义样式”复选框不响应“检查”数据绑定

自定义复选框样式-标签在选中/取消选中时跳转

对话框中的自定义复选框样式

样式不适用于自定义复选框和单选按钮

对话框中的自定义复选框样式

样式不适用于自定义复选框和单选按钮

选择自定义属性以设置样式

使用CSS属性选择器来设置复选框的样式。（Android GMAIL）

复选框上ng-indeterminate属性的AngularJS自定义指令

反应：获取自定义复选框的选中属性

javascript 使用自定义属性添加复选框选中的值

CSS 复选框样式

如何通过在WPF中进行绑定来设置复选框内容的背景色

无法使用CSS设置复选框样式？

仅使用CSS设置复选框的样式

如何设置HTML复选框的文本样式？

单击复选框后如何设置标签标签的样式？