添加标志图像以选择选项

时间:2018-12-12 19:09:22

标签: html css css-selectors html-select

美好的一天!我是新手。我试图在选择中的选项标签中添加图像。但是当我运行代码时。它不显示图像。有人能帮我吗?谢谢

这是代码:

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>

1 个答案:

答案 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;
}