How to place a border on the select arrow with CSS?

Asked

Viewed 306 times

1

I have this select with html and css:

inserir a descrição da imagem aqui

How do I place a border on the side of the arrow?

Thus:

inserir a descrição da imagem aqui

html css html5 css3

  • Already tried to use it like this. Ex: select { }

  • Here is an example that can help you: https://codepen.io/vkjgr/pen/VYMeXp

  • @Emersonvieira Helped a lot. Thank you!!

1 answer

2

With the @Emerson Vieira example, 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>

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.