Customized <select> Input

How do I make a customized select box like this in JavaScript? I would assume you use JavaScript because obviously HTML and CSS can't do it. I'm not that great with JavaScript, I can do basic stuff but I have no idea how I would go about doing this. Could someone help me by pointing me in the right direction or give me a basic script that would lead me in the direction of coding this.

 

You can use CSS with the background

 

Yeah but you can't make it a gradient. You also cannot make rounded corners on it or change the type of the arrow or its colors.

 

I mean you need css

select{
   background: url('your_rounded_box.png');
}

input.button{
 background: url('your_button_image');
}

PHP:

 

How will I get the text appear in the background box?