How to put border on select arrow with CSS?

Navigation
1

I have this select with html and css:

HowdoIputaborderonthesideofthearrow?

So:

    
asked by anonymous 08.06.2017 / 00:09

1 answer

2

With the example of @ Emerson Vieira, I made some changes to get the result you expect: 

select {
  background-image:
    linear-gradient(0deg, transparent 0%, transparent 0%),
    linear-gradient(0deg, transparent 0%, transparent 0%),
    linear-gradient(to right, #ccc, #ccc);
  
  background-position:
    calc(100%) calc(1em + 1px),
    calc(100%) calc(1em + 1px),
    calc(100% - 1.5em) 0.2em;
  background-size:5px 5px, 5px 5px, 1px 2.5em;
  background-repeat: no-repeat;
  width: 200px;
  padding: 10px;
}
<select class="select">
  <option>Arroz</option>
  <option>Feijão</option>
  <option>macarrão</option>
</select>
    
08.06.2017 / 01:37
Generate error at the end of the copy if any files are not copied update tabcontrol tab