How to add CSS custom right arrow?

Asked By Fernando W Alvarez 30 points N/A Posted on - 03/23/2013

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.

• Status: Open
• Question Views: 840
• Answer Count: 2
• Vote Up 0 Vote Down

• Answer Accepted: Yes
• Question Category: PHP

Best Answer by John L Krug

Go To Solution

Answered By Joseph S Peterson 35 points N/A #172962

How to add CSS custom right arrow?

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.

About Joseph S Peterson

Questions
19

Answers
101

Best Answers
13

• Vote Up 0 Vote Down

• Posted on - 04/06/2013
• Question Category: PHP

Best Answer

Best Answer

Answered By John L Krug 10 points N/A #172963

How to add CSS custom right arrow?

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

About John L Krug

Questions
24

Answers
100

Best Answers
18

• Vote Up 0 Vote Down

• Posted on - 04/07/2013
• Question Category: PHP