Style select elements in Webkit only

I have added webkit only styles for the select element. I have disabled the browser styles and applied the style guide styles plus the arrow using the Libricon icons.

Work carried out for this new patch:
Adjusted the arrow icon position and the right padding to accommodate the background icon.
Added hover, focus styles and RTL styles.

I have attached screenshots and this patch should pass :)

+    -webkit-font-smoothing: antialiased;
+    }
+    [dir="rtl"] select {
...
+    }
+}

Indentation looks off here?

I have fixed the issues pointed out in #9 and #10. I have also added the RTL no-svg styles that were missing.
I have listed all the different test scenarios in the issue summary.

Checked with different browsers and RTL languages too. In Chrome, Safari and Opera looks awesome!

Chrome

In Firefox looks a little bit weird when you open it. I'm not sure if it's possible to fix it.

Firefox Closed

Firefox Opened

RTL

I have removed all the non Webkit styles for Select elements. Firefox will only show the default browser styles.

Well done! Only one thing more. I noticed some misplacement when you open selectbox in Chrome.

I'm not sure but I think it was not here before. Could you check it, pleeeeeease?

The font weight of the select boxes is causing the misplacement. We cannot target the styles of the options that pop up when clicked on so their text cannot be made bold to match. Therefore removing the bold font weight makes everything line up a lot better.

Updated patch - I changed the padding so you cannot see any of the right of the select box.

That's A LOT of additional CSS. And more HTTP requests to download the SVGs.

I'm sorry, but I really have to question the value here. Does the improved design really outweigh the decreased performance? Especially on mobile.

See https://speakerdeck.com/csswizardry/normalising-designs-for-better-quali....

How does it look with the browser default arrow? Their might be crisp that happens, but if not we can remove it.

I tested, what we can do, when removing -webkit-appearance: none;

cursor: pointer; -> working
padding: 1px 1.571em 2px 0.5em; /* LTR */ -> not working
border: 1px solid #a6a6a6; -> working
border-radius: 0.143em; -> not working
background-color: #f2f1eb; -> working, but make a gradient, with the color
color: #333333; -> working, also change default arrow color
text-decoration: none; -> not working
text-shadow: 0 1px hsla(0, 0%, 100%, 0.6); -> not working
font-size: 14px; -> working

Agree with the last test comments, and I think is necessary do the second point that @LewisNyman comment on #25, because if not the background icon appears over the defauls arrows. I attach a screenshot.

Rerolled.

+++ b/core/misc/icons/333333/caret-down.svg
@@ -0,0 +1 @@
\ No newline at end of file

Can you add a newline here? :)

In any case, this patch looks much better already. Thanks :)

I still have some questions:

1. It still scares me that we're adding fifteen properties for the select selector. AFAICT, the text-decoration and text-shadow and properties have zero effect (in Chrome and Safari). font-size: 14px as a fallback for font-size: 0.875rem also seems useless, because all Webkit browsers support rem in the first place! :)
2. I don't know the proper terminology, but I see that the top of capital letters is much closer to the top of the <select> than the bottom of letters is to the bottom of the <select>. It feels off-balance. Or is that just me, because I'm used to the default styling?
   This is what it looks like for me (in Chrome):
   
3. I didn't realize that this only is targeting WebKit. http://stackoverflow.com/questions/9620404/styling-a-select-element-in-f... and http://stackoverflow.com/a/21163651 suggest that this is possible in Firefox as well as IE, but perhaps it's too fragile? Please either make it work in all browsers, or update the issue title to reflect that this only targets Webkit.
4. If we only target Webkit for such relatively prominent styling: do we have a precedent for that?

Hehe, glad you like it :)

I have no further complaints. Thanks for spending the extra time to not affect front-end performance as much :) The difference with #21 is immense.

Manually tested and still works great.

1. +++ b/core/themes/seven/css/style.css
   @@ -831,8 +831,7 @@ input.form-color,
   -select.form-select {
   
   @@ -862,7 +861,7 @@ select.form-select {
   -.form-select:focus {
   

   Why are we removing this? Won't this affect all browsers?

2. +++ b/core/themes/seven/css/style.css
   @@ -862,7 +861,7 @@ select.form-select {
    .form-textarea:focus,
   ...
   +.form-textarea:focus {
   

   Duplicated.

Committed 9e6dd21 and pushed to 8.x. Thanks!

diff --git a/core/misc/icons/333333/caret-down.svg b/core/misc/icons/333333/caret-down.svg
old mode 100755
new mode 100644

Fixed the file mode of caret-down.svg during commit.

No love for IE? it seems doable: http://sampsonblog.com/615/ie10s-pseudo-elements