[select] Arrow overlapping text when container is floated

[brettsmason]

How can we reproduce this bug?

1. Create a select input with decent length options
2. Float the container
3. The arrow will be covering the end of the option

CodePen link

I have worked out how to solve the issue. At the moment the arrow is in the main area and not the padded area. I suggest changing the select padding on the right (or left if RTL?) to 1.5 x the form padding, and then setting a minus right for the background SVG.

See attached before and after screenshots.

Does this approach to fixing it sound OK? If so I'll add a PR.