Icon not displaying properly inside option element - html

Question

Inside the spacing-container div, I'm setting an image to appear to the right-hand side of the options, the image is a line spacer icon. However, when I set this icon it's just a big black mark. I've tried resizing it but not got very far with it. The icons which I'm using in the two other divs are working, which display a drop-down icon.
Further, I was hoping to store the icons locally, but when I set the icons they do not come through when I set the background to find the images locally. My file structure is as follows:
CSS
--> CssImages
--> -- down-chevron.png
--> -- line-spacing.png
main.css
and I was importing them in this format in my css file.
background: transparent url("CSS/CssImages/down-cheron.png")
Unfortunately this didn't seem to work, however, upon inspecting in developer tools the images were being pulled through to the local host.
My HTML is here:
<div class="tool-bar">
<div class="options-container">
<select>
<option value = "times-new-roman">Times New Roman</option>
<option value = "arial">Arial</option>
<option value = "courier-new">Courier New</option>
<option value = "verdana">Verdana</option>
</select>
</div>
<div class="options-container font-container">
<select>
<option value = "8">8</option>
<option value = "10">10</option>
<option value = "12">12</option>
<option value = "14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
</select>
</div>
<div class="options-container spacing-container">
<select>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
</select>
</div>
</div>
My Css snippet is here:
.tool-bar {
width: 100%;
height: 100%;
background-color: #a19f9f;
float: left;
display: inline;
}
.options-container {
padding: 10px;
width: 20%;
border-left: 3px solid #aaaaaa;
background-color: #ffffff;
float:left; display:inline;
}
.font-container {
width: 5%;
}
.spacing-container{
width: 6%;
}
.options-container select {
width: 100%;
font-size: 20px;
border: 0;
line-height: 1;
height: 34px;
outline: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center;
display: block;
margin-right: 5px;
-webkit-appearance: none;
background-position-x: 215px;
}
.font-container select {
background-position-x: 20px;
}
.spacing-container select {
background: url("https://image.flaticon.com/icons/svg/1827/1827633.svg") 0 0;
background-position-x: 0;
}
I appreciate your time and your advice with the matter.
Thank you,

Answer 1

The icon you are using is too big, that's why it is not visible. So, you have to use background-size property.
.tool-bar {
width: 100%;
height: 100%;
background-color: #a19f9f;
float: left;
display: inline;
}
.options-container {
padding: 10px;
width: 30%;
border-left: 3px solid #aaaaaa;
background-color: #ffffff;
float:left; display:inline;
}
.font-container {
width: 10%;
}
.spacing-container{
width: 10%;
}
.options-container select {
width: 100%;
font-size: 20px;
border: 0;
line-height: 1;
height: 34px;
outline: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center right;
display: block;
margin-right: 5px;
-webkit-appearance: none;
}
.font-container select {
background-position-x: 100%;
}
.spacing-container select {
background: url("https://image.flaticon.com/icons/svg/1827/1827633.svg") no-repeat center;
background-position-x: 100%;
background-size: 20px;
}
<div class="tool-bar">
<div class="options-container">
<select>
<option value = "times-new-roman">Times New Roman</option>
<option value = "arial">Arial</option>
<option value = "courier-new">Courier New</option>
<option value = "verdana">Verdana</option>
</select>
</div>
<div class="options-container font-container">
<select>
<option value = "8">8</option>
<option value = "10">10</option>
<option value = "12">12</option>
<option value = "14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
</select>
</div>
<div class="options-container spacing-container">
<select>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
</select>
</div>
</div>