Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Christian Solorzano
Christian Solorzano
6,606 Points

How to add an arrow in drop down menu?

I'm working on a store page and I'm adding PayPay options to each store item. I'm trying to have an arrow show beside the first option so the user knowns that if they click, more options will be available.

Here's the HTML of an entire PayPal form. The options are the ones I'm trying to select. Preferably the first option because that's the one that's visible on the page.

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                    <input type="hidden" name="cmd" value="_s-xclick">
                    <input type="hidden" name="hosted_button_id" value="6YADSPQN3V5KJ">
                    <table>
                        <tr><td><input type="hidden" name="on0" value="Shipping Options"><p>Shipping Options</p></td></tr><tr><td><select name="os0">
                        <option value="U.S. destinations: 10.00 + 5.00 shipping">U.S. destinations: 10.00 + 5.00 shipping $15.00 USD</option>
                        <option value="Outside U.S. destinations: 10.00 + 11.00">Outside U.S. destinations: 10.00 + 11.00 $21.00 USD</option>
                    </select> </td></tr>
                    </table>
                    <input type="hidden" name="currency_code" value="USD">
                    <input type="image" src="img/store/paybutton.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                </form>

3 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

There's not much styling you can do to select elements, and almost none you can do to option elements within them.

See this post on CSS-Tricks: Dropdown Default Styling

The simplest way to get an arrow to show next to a select/dropdown option is to just add one in the text using a HTML entity or Unicode character. Here's a list of arrows you can use: HTML Arrows.

I'd suggest → ( &rarr; ) or similar (not sure which direction you want!)

                <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                    <input type="hidden" name="cmd" value="_s-xclick">
                    <input type="hidden" name="hosted_button_id" value="6YADSPQN3V5KJ">
                    <table>
                        <tr><td><input type="hidden" name="on0" value="Shipping Options"><p>Shipping Options</p></td></tr><tr><td><select name="os0">
                        <option value="U.S. destinations: 10.00 + 5.00 shipping">U.S. destinations: 10.00 + 5.00 shipping $15.00 USD &rarr;</option>
                        <option value="Outside U.S. destinations: 10.00 + 11.00">Outside U.S. destinations: 10.00 + 11.00 $21.00 USD</option>
                    </select> </td></tr>
                    </table>
                    <input type="hidden" name="currency_code" value="USD">
                    <input type="image" src="img/store/paybutton.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                </form>
Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

I havent checked enteraly the code but if you want add a arrow what i allways do is wrap up in a span tag and then set the image or font or whatever is that in the CSS and then it apears on whatever side i put the class.

Hope it helps.

Konrad Pilch
Konrad Pilch
2,435 Points

What you can do , its go and downolad font-awesome and just get the fonts and you will have arrow there. Easy tas that.

https://fortawesome.github.io/Font-Awesome/

Look how they use the code , basically get familiar with that website and you will have pretty much a lot of them. As well as you can downolad only bootstrap fonts too. This here are better in my opinion.

Ethan Young
Ethan Young
3,388 Points
Ethan Young
Ethan Young
3,388 Points

I don't know too much about CSS but previously when I was adding arrows to my web-page, I created my own arrow using photoshop, saved it as a JPEG, added it into my images folder, described a url link to the arrow so that it would display onto my webpage, and used margin/padding/width/height to describe the size and position of the image. I also used an href tag to make the image clickable.

Hope this helps.