我有一个选择的性别列表.
码:
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>
Run Code Online (Sandbox Code Playgroud)
我想在下拉列表中使用drop-down-icon.jpeg中的图像.
我想添加一个按钮代替下拉图标.
怎么做?
我尝试在几个选项的第一个选项中添加一个插入符号图标,如下图所示:
这是一个小提琴我的例子.
我无法在上面的小提琴上看到图标.
和相应的代码:
.wrapper {
height: 200px;
background-color: red;
padding-top: 100px;
padding-left: 150px;
}
#before-select {
font-size: 30px;
color: #ffffff;
}
select {
border: none;
background: transparent;
/*background-color: blue;*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 180px;
padding-top: 0px;
background-size: 20px;
color: #ffffff;
font-size: 30px;
}
select option {
color: #424146;
background: #ffffff;
}Run Code Online (Sandbox Code Playgroud)
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<div class="wrapper">
<form role="form">
<span id="before-select">in</span>
<select name="town">
<option value="London">London <i class="fa …Run Code Online (Sandbox Code Playgroud)我有一个7x7px图像,我想在我的页面的每个选择选项旁边添加.我需要在CSS中添加图像还是可以将其添加到HTML中?我想将图像也放在文本的左侧.我尝试添加图像,但这只是弄乱了风格.谢谢您的帮助!
<ul class="dropdown-menu">
<li>
<a href="#">Red</a>
</li>
<li>
<a href="#">Green</a>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)