gpt4 book ai didi

javascript - 复选框内的图像

转载 作者:太空宇宙 更新时间:2023-11-04 09:48:40 25 4
gpt4 key购买 nike

我只是想知道你能不能在复选框中放一张图片让它更丰富多彩?我对此进行了很多搜索,但没有找到任何可以帮助我的东西

编辑:当复选框被“选中”时,我已经这样做了,弹出一个菜单。HTML:

  <!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href="css.css" type="text/css" />
<link rel="icon" href="favicon.ico" type="image/icon"/>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT4??4=" crossorigin="anonymous"></script>
<script>
$(function() {
$(".box a").on("click",function() {
$("#toggle-nav").prop('checked', false)
});
});
</script>
<body>
<!-- start header -->
<header id="head">
<div class="something">
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
<div class="box">
<ul>
<li><a href="#play"><i class="icon-home"></i> Play</a></li>
<li><a href="#"><i class="icon-file-alt"></i> about</a></li>
<li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li>
<li><a href="#"><i class="icon-envelope"></i> contacts</a></li>
</ul>
</div>

</nav>
</div>

谢谢你:)

最佳答案

您可以使用背景图像 css 属性。

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

    input[type="checkbox"] + label{
background-image: url('img1.png');
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-image: url( background-image: url('img2.png');
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
}

关于javascript - 复选框内的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39285453/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com