Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Ian Rushton
Ian Rushton
15,789 Points

Custom form elements help

I have been asked to create a very simple stylistic form.

It contains a date select, a radio input section with 4 options and a file upload.

The selects need to be plain white rectangles with a 2px black border and an arrow to indicate the drop down.

The radio buttons need to be 4 white rectangles containing centred text (no tick box) which, when selected, turn green.

And the file upload needs to be a plain white rectangle with a black border and a rectangular 'choose file' button displaying the text 'Browse' with a green background.

The style looks so simplistic but everywhere I look I can't seem to find a really simple way of achieving this using JavaScript/CSS.

Can't believe this is proving so difficult!!

1 Answer

Hello,

I think you might find jQuery UI very useful for your project.

There's a wealth of features you can utilise and some really clear examples.

So for your radio buttons, you could try: https://jqueryui.com/button/#radio

You could try this for your select menu: https://jqueryui.com/selectmenu/#default

They even have a plain old button: http://jqueryui.com/button/#default

And everything 'themeable' with css.

Hope you have some luck with these :)

Tayler

Ian Rushton
Ian Rushton
15,789 Points

You saved me! Thank you very much!