Can someone teach me how I can put that arrow with that dash beside it?
In order to stylize the Combobox, the first thing to do is remove the entire style from it, then wrap it in a div, and stylize this div.
It is necessary to stylize the DIV instead of the select, since the select itself does not support many CSS features itself.
/* Removendo stilos do Select */
.select-com-estilo select {
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
border: 0px none transparent;
box-sizing: border-box;
}
/* diga olá para o IE */
.select-com-estilo select::-ms-expand {
display: none;
}
/* Setando o tamanho do Select - fica ao seu criterio */
.select-com-estilo select {
width: 100%;
padding-right: 32px; /* largura da imagem (24px), acredito da "margem a direita" (olhar background-position no estilo abaixo)(4px) e da "margem a esquerda"(4px) */
font-size: 16px;
height: 32px;
}
/* A imagem abaixo possui tamanho 24px por 24px */
.select-com-estilo {
float: left;
border: 1px solid gray;
box-sizing: border-box;
background: whitesmoke;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA5klEQVRIS92V4Q3CIBCF6QQ6ihuokxgncAXdwBHcpLqBo+gGvtfkEsQD7s70T5u8tCnh++CAdkgzX8PM/LQswRrlOiGXP8t2Rv8r8iJHSkT4iGyQG3IMStj3gDyRPSUU5HDhRiQCF8YkoeCObJUReyQlXHAPClgWSlZBSQ3+Bm8naxCVNOFci/wceCVdOCtSHjSrxATXBHzXk3BQ3IrlNdWcZckbap+KlkRhJxVem4EArJIqvCfolYvtTbhF0JJ04VaBJjHBPYJcwuef3aKtvFcgEt6/tmINHhG0WGrbsn6Z7ulbOnwAN0E5GbS/JDkAAAAASUVORK5CYII=');
background-repeat: no-repeat;
background-position: calc(100% - 4px); /* "margem a direita" de 4px */
}
<div class="select-com-estilo">
<select>
<option>Primeira Opção</option>
<option>Segunda Opção</option>
</select>
</div>
To leave the select as you wish, you will only need to replace the image with an image just like your example.
The source of the image used in the Example: Flaticons - Down arrow of angle
div.sidebar-right {
display: table;
float: left;
}
div.name-user {
display: inline-block;
margin-right: 15px;
font-family: "Verdana";
font-size: 12px;
}
div.options {
display: inline-block;
border-right: 1px dashed #C7C7C7;
border-left: 2px solid #C7C7C7;
height: 25px;
width: 40px;
text-align: center;
}
div.options:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
}
<div class="sidebar-right">
<div class="name-user">Administrador</div>
<div class="options"></div>
</div>