SVG background replacement with background-image

HTML & CSS
1

I like a concept from an example: https://codepen.io/ViszkY

select {
  color: #8C98F2;
  width: 50%;
  margin-left: 25%;
  margin-top: 50px;
  padding: 10px 0 10px 10px;
  border: 0 !important;
  /* needed */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* SVG background image */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 15px) 17px;
  background-repeat: no-repeat;
  background-color: #efefef;
}

I’m new to this but there is background which I should replace with the background-image. How to manage this and keep an arrow in the correct way? If I replace with the background-image like:

background-image: url(“data:image/svg+xml;utf8,”) no-repeat;

Need help as this will not work.

2

You can have multiple backgrounds in CSS now on the same element.

If that’s what you were asking?

The codepen you linked to has a problem if text is too long and it will obscure the arrow. Make sure you pad out the right of the select to avoid this happening.

3

I have tried to understand your suggestion. If I replace background image and it will work. Can be transformed bottom code into polygon using online tool?

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='32'><polygon points='' style=''></polygon></svg>

It is full of % characters.

Source code is the following: https://www.filamentgroup.com/lab/select-css.html
`
background-image: url(‘data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E’), linear-gradient(to bottom, #FFF 0%,#E5E5E5 100%);

`

4

You already have the svg co-ordinates for a triangle arrow in your first snippet?

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;

The image triangle you posted in your last example is almost the same so why not use the original?

I don’t believe you can easily convert an image into svg co-ordinates. As I said above there seems no need to do this as you already have the code for an svg triangle arrow anyway?

5

Thank you for the information. You are right. SVG is very usable but I avoided.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.