Jquery 如何使用图像代替单选按钮

以下

标签

s充当

单选按钮

s，在所选

按钮上显示红色
边框
。

我希望显示一个图像，而不是红色的

边框

这可能吗

代码：

input[type=“radio”]{
显示：无；
}
输入[type=“radio”]：选中+标签{
边框：1px纯红；
}

A.
B
C

当然可以

如果希望标签后面显示图像，只需使用背景：

input[type="radio"]:checked + label {
    background: url(http://placehold.it/100x100);
}

如果要将图像用作边框，可以使用CSS3边框图像属性：

input[type="radio"]:checked + label {
    border-image: url(http://placehold.it/100x100) 300 round;
}

当然

如果希望标签后面显示图像，只需使用背景：

input[type="radio"]:checked + label {
    background: url(http://placehold.it/100x100);
}

如果要将图像用作边框，可以使用CSS3边框图像属性：

input[type="radio"]:checked + label {
    border-image: url(http://placehold.it/100x100) 300 round;
}

---

您可以使用pseudo元素

：：before

和

内容：url（）

，这样图像将保持在

标签的顶部


input[type=“radio”]{
显示：无；
}
输入[type=“radio”]：选中+标签{
职位：相对
}
输入[type=“radio”]：选中+标签：：之前{
内容：url（“//lorempixel.com/15/15”）；
位置：绝对位置；
左：0
}

A.
B
C
您可以使用伪元素
：：before
和
内容：url（）
，这样图像将保持在
标签的顶部


input[type=“radio”]{
显示：无；
}
输入[type=“radio”]：选中+标签{
职位：相对
}
输入[type=“radio”]：选中+标签：：之前{
内容：url（“//lorempixel.com/15/15”）；
位置：绝对位置；
左：0
}

A.
B
C
您可以使用
背景图像
和
背景位置
轻松完成，如下所示。
input[type=“radio”]{
显示：无；
}
输入[type=“radio”]+标签{
背景图像：url（“https://developer.tizen.org/sites/default/files/images/5.3.2.d.png");
背景位置：-169px-31px；
背景重复：无重复；
显示：块；
高度：37像素；
宽度：37px；
}
输入[type=“radio”]：选中+标签{
背景位置：-44px-31px；
}
您可以使用
背景图像
和
背景位置
轻松完成，如下所示。
input[type=“radio”]{
显示：无；
}
输入[type=“radio”]+标签{
背景图像：url（“https://developer.tizen.org/sites/default/files/images/5.3.2.d.png");
背景位置：-169px-31px；
背景重复：无重复；
显示：块；
高度：37像素；
宽度：37px；
}
输入[type=“radio”]：选中+标签{
背景位置：-44px-31px；
}

您可以使用JavaScript实现这一点，但由于标签元素本身绑定到表单元素，而图像不绑定，因此解决方案将更加复杂。我希望您能发现这一点很有用：）您可以使用JavaScript实现这一点，但由于标签元素本身绑定到表单元素，而图像不绑定，因此解决方案将更加复杂。我希望你会觉得有用：）谢谢。如何使用自己的图像而不是基于url的图像。我知道这似乎是一个愚蠢的问题，但我的所有图像都在我的公用文件夹中，我不知道如何使用您的答案访问这些图像。只需将路径更改为类似于
content:url（“myimagefolder/myimage.jpg”）
Thx。如何使用自己的图像而不是基于url的图像。我知道这似乎是一个愚蠢的问题，但我的所有图像都在我的公用文件夹中，我不知道如何使用你的答案来访问这些图像只要将路径更改为类似
content:url（“myimagefolder/myimage.jpg”）