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.sstatic.net/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' 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
– rebecca, Commented Jul 15, 2019 at 10:47
Possible dublicate of stackoverflow.com/questions/14218307/select-arrow-style-change — Sabee
– Sabee, Commented Jul 15, 2019 at 11:00

Edrisa Turay · Accepted Answer · 2019-07-15 10:55:49Z

1

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>

answered Jul 15, 2019 at 10:55

Edrisa Turay

6406 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sathiya Narayanan · Accepted Answer · 2019-07-15 22:48:34Z

0

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

answered Jul 15, 2019 at 22:48

Sathiya Narayanan

112 bronze badges

Collectives™ on Stack Overflow

How to transform background image

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related