Fatal编程技术网
  • html/
  • Html 添加标志图像以选择选项

Html 添加标志图像以选择选项

html css

Html 添加标志图像以选择选项,html,css,css-selectors,html-select,Html,Css,Css Selectors,Html Select,你好！我是个新手。我正在尝试在选择框的选项标签中添加图像。但是当我运行代码时。它不显示图像。有人能帮我吗？多谢各位 代码如下： HTML: VJ自定义选择框Jquery插件 您选择的国家/地区：选择 挑选 印度 尼泊尔 很难自定义&标记 和标记很难自定义，对于一个浏览器适用的任何东西对于其他浏览器都不适用 解决方案 忘记自定义，创建一个伪-✱ 使用和 & 忘记自定义，创建一个伪-✱ 使用和 & ✱伪-和伪-标签在外观和行为上与标准的和标签相近。更重要的是，它可以存储和处理值，并且可以注

你好！我是个新手。我正在尝试在选择框的选项标签中添加图像。但是当我运行代码时。它不显示图像。有人能帮我吗？多谢各位

代码如下：

HTML:


VJ自定义选择框Jquery插件
您选择的国家/地区：选择

挑选
印度
尼泊尔
很难自定义
&
标记
和
标记很难自定义，对于一个浏览器适用的任何东西对于其他浏览器都不适用

解决方案
  • 忘记自定义
    ，创建一个伪-
    ✱ 使用
    和
&
  • 忘记自定义
    ，创建一个伪-
    ✱ 使用
    和
&
✱伪-
和伪-
标签在外观和行为上与标准的
和
标签相近。更重要的是，它可以存储和处理
值
，并且可以注册到
更改
事件

演示 详细信息将在演示中进行注释 
/*|用于演示
这是一个测试，用来证明这个伪函数
通过记录所选伪变量的值来创建实变量-
到控制台。
*/
var xC=document.forms.container；
var xE=xC.elements；
var vR=xE.rad；
xC.onchange=函数（）{
console.log（vR.value）；
}
html，
身体{
字体：400小写16px/1.25 Arial；
}
字段集{
宽度：适合的内容；
填充：0；
}
传奇{
字号：1rem
}
细节{
宽度：150px；
光标：指针；
保证金：0 4px-5px 0；
填充：0 10px；
}
总结{
位置：相对位置；
宽度：96%；
轮廓：0.5px脊灰；
}
/*
隐藏的默认箭头
*/
详细信息摘要：-webkit详细信息标记{
可见性：隐藏；
位置：绝对位置；
z指数：-1；
}
/*|伪-
所有伪随机变量最初都是隐藏的，并且
是唯一将显示/隐藏的标记，
下一条评论解释了如何。
*/
雷德先生{
显示：无
}
.选择{
显示：无；
边距：0 0 2px 0；
光标：指针；
字体大小：0.9rem；
盒影：-2px-2px 11px rgba（0,0,0,0.3）插图；
}
/*|两个条件
1.如果一切都是可见的。
=============================================
2.如果那么
单选按钮是可见的。
*/
[打开]。选择，
.rad：选中+.opt{
显示：块；
}
/*|用于演示目的
此规则集更改控制台的显示方式。
*/
.作为控制台包装{
宽度：50%；
最小高度：100%；
左边距：50%；
字体变体：正常；
}
.作为控制台行。作为控制台行：：之后{
内容：''；
填充：0；
保证金：0；
边界：0；
宽度：0；
}

VJ自定义选择框Jquery插件
国家
╍╍╍╍╍╍╍╍╍
美国
大不列颠
印度
尼泊尔
您的问题已经解决了（非常感谢！）如果我选择英国，我希望英国在输入无线电中被检查，而不是-----------？您好@rrr，您指的是
\X
上的
[checked]
属性吗？这只是为了设置最初选择的内容，因此如果您希望在加载页面后选择
#GB
，则将
[checked]
属性添加到
#GB
，并从
#X
中删除
[checked]
属性。事实上，如果您根本不需要
#X
，您可以完全删除它。您好。因为我会用它来切换语言。例如，我选择了英语默认值。但是其他的呢？如果我在刷新时单击gb，我希望已经选择gb作为默认值，而不是英语，你能帮我解决这个问题吗？我真的很抱歉：( 
<!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>