Custom HTML Select Arrow Image

Question

I want to hide the defalut arrow of the html select list and add a custom image(arrow) to the list.

.form-inline select {
            margin: 10px 35px 15px 0px;
            background-color: #fff;
            font-size: 30px;
            width: 80px;
            color: #000;
            background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png") center bottom no-repeat;
            cursor: pointer;
            display: block;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            border: none !important;
            justify-content:center;
            align-items:center;
            text-align:center;
        }

this is my current styles . It is not displaying the arrow as I want. Please help me out.

There is a background-image property in your css, search for the image that you want and replace it, that's all. — Triby, Dec 30 '19 at 03:23
Maybe you can't hotlink the image and you need to download it and use it from your own project folder. — Triby, Dec 30 '19 at 03:30
Please edit question and add your HTML code and what have you tried. — Triby, Dec 30 '19 at 03:51

score 1 · Accepted Answer · answered Dec 30 '19 at 04:03

You're mixing background and background-image CSS styling together, no wonder your styling doesn't work:

Short version: (I'm using background instead of background-image)

background: salmon url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png") no-repeat center calc(100% - 2px);
background-size: 24px 24px;

But I recommend this way for easier modification purpose:

background-color: #fff;
background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png");
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: center calc(100% - 2px);

FYI, this CSS part will hide the default arrow of browser:

-webkit-appearance: none;
appearance: none;

Custom HTML Select Arrow Image

1 Answers1