How to add CSS custom right arrow?

Asked By 30 points N/A Posted on -
qa-featured

Is using a CSS custom right arrow for select and dropdown menu, and everything working great, but the arrow on the right does not look like i want, i would like it to be wider.

So am thinking of setting background-image property in CSS (displayed default down arrow instead), but have no idea how doing that.

SHARE
Best Answer by John L Krug
Answered By 35 points N/A #172962

How to add CSS custom right arrow?

qa-featured

Hi,

You can set the size and width of the arrow. You can use the background image property by using

Content: url ('some_path.png');

Or you can resize your image, save it and encode it in base 64 format and use it as:-

Content: url (data: image/png; base64, CAYAAAC3mX7tAAAACXBIWXMAAAsTAAALEwAA);

Encoding an image to base 64 can be done here- http://www.motobit.com/util/base64-decoder-encoder.asp

Regards.

Best Answer
Best Answer
Answered By 10 points N/A #172963

How to add CSS custom right arrow?

qa-featured

Hi Fernando W Alvarez,

In CSS there are few types of background property, you can use the color background property and image background property. For the better, I show you both ways, you will choose your best,

Background-color property

Body {background-color: #b0c4de;}

Background Image

Body {background-image: url ('paper.gif');}

Background Image – Repeat Horizontally or Vertically

Body {background-image: url ('gradient2.png');}

Background Image – Set position and no-repeat

Body {background-image: url ('img_tree.png');background-repeat:no-repeat;}

Background – Shorthand property

Body {background: #ffffff url ('img_tree.png') no-repeat right top;}

Thanks for asking

Related Questions