How to transform background image

Question

I would like to stylize select input. I added my own arrow from url. I did it changing background in select input. I have problem, because the arrow is too close to the edge. I want to transform background a bit from edge but I do not know how to do this. Maybe you have a better way to solve this problem. Now it looks like this: https://i.stack.imgur.com/gc02K.jpg.

<select>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  appearance:none;
  background: url("../assets/icon-dropdown-active.svg") no-repeat right white;
}

you should check out 'background-position' https://developer.mozilla.org/en-US/docs/Web/CSS/background-position you set it to "right" but you can also use for example px values or % values — rebecca, Jul 15 '19 at 10:47
Possible dublicate of https://stackoverflow.com/questions/14218307/select-arrow-style-change — Sabee, Jul 15 '19 at 11:00
Possible duplicate of [Select arrow style change](https://stackoverflow.com/questions/14218307/select-arrow-style-change) — Sabee, Jul 15 '19 at 11:02

score 1 · Accepted Answer · answered Jul 15 '19 at 10:55

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://image.flaticon.com/icons/svg/60/60995.svg) 96% / 15% no-repeat #eee;
}

/* CAUTION: IE hackery ahead */
select::-ms-expand { 
    display: none; /* remove default arrow on ie10 and ie11 */
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background:none\9;
        padding: 5px\9;
    } 
}

<select>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

score 0 · Answer 2 · answered Jul 15 '19 at 22:48

0

Use background-size property if you want to change the size of the image

answered Jul 15 '19 at 22:48

Sathiya Narayanan

11
2

How to transform background image

2 Answers2