Combobox Css Help

Question

Can someone show me how I can get that arrow with that dashed next to it ?

Answer 1

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>

Answer 2

To be able to style the Combobox, the first thing to do is to remove all the style from it, then wrap it in a div, and style this div.

You need to style DIV instead of select, since select itself does not support many CSS features per se.

/* 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 select as you wish, you just need to replace the image with an image like your example.

Follow the source of the image used in the Example: Flaticons - Down Arrow of Angle