美好的一天!我是新手。我试图在选择中的选项标签中添加图像。但是当我运行代码时。它不显示图像。有人能帮我吗?谢谢
这是代码:
HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom select box Jquery Plugin by VJ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="selected-item">
<p>You Selected Country : <span>Select</span></p>
</div>
<select name="" id="cusSelectbox">
<option value="Select">Select</option>
<option value="India"><img src="https://static.webshopapp.com/shops/094414/files/054959460/the-united-states-flag-icon-free-download.jpg">India</option>
<option value="Nepal">Nepal</option>
</select>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
答案 0 :(得分:0)
<select>
和<option>
标签 <select>
和<option>
标签很难自定义,任何一种适用于一个浏览器的标签都不适用于其他标签。
<select>
,使用<select>
和<details>
<summary>
✱
<select>
<details>
&<summary>
<option>
,使用<option>
和<input type='radio'>
<label>
✱
<option>
<input type='radio'>
&<label>
✱伪<select>
和伪<option>
标签的外观和行为将与标准<select>
和{{1} }标签。更重要的是,它可以存储和处理<option>
,并且可以将其注册到value
事件中。
详细信息在演示中被评论
change
/*| For Demonstration Purposes
This is a test to prove that this pseudo-<select> functions like
a real <select> by logging the value of the selected pseudo-
<option> to the console.
*/
var xC = document.forms.container;
var xE = xC.elements;
var vR = xE.rad;
xC.onchange = function() {
console.log(vR.value);
}
html,
body {
font: 400 small-caps 16px/1.25 Arial;
}
fieldset {
width: fit-content;
padding: 0;
}
legend {
font-size: 1rem
}
details {
width: 150px;
cursor: pointer;
margin: 0 4px -5px 0;
padding: 0 0 0 10px;
}
summary {
position: relative;
width: 96%;
outline: 0.5px ridge grey;
}
/*
Hides <detail>'s default arrow
*/
details summary::-webkit-details-marker {
visibility: hidden;
position: absolute;
z-index: -1;
}
/*| Pseudo-<option>
All pseudo-<option> are initially hidden and
<label class='opt'> are the only tags that will show/hide,
the next comment explains how.
*/
.rad {
display: none
}
.opt {
display: none;
margin: 0 0 2px 0;
cursor: pointer;
font-size: 0.9rem;
box-shadow: -2px -2px 11px rgba(0, 0, 0, 0.3) inset;
}
/*| Two Conditions
1. If <details open='true'> all <label class='opt'> are visible.
=============================================
2. if <input class='rad' type='radio' checked> then the
<label class='opt'> that proceeds the radio button is visible.
*/
[open] .opt,
.rad:checked+.opt {
display: block;
}
/*| For Demonstration Purposes
This ruleset changes how the console is displayed.
*/
.as-console-wrapper {
width: 50%;
min-height: 100%;
margin-left: 50%;
font-variant: normal;
}
.as-console-row.as-console-row::after {
content: '';
padding: 0;
margin: 0;
border: 0;
width: 0;
}