Custom select box styling #127

aaronshekey · 2015-06-09T19:35:28Z

A stab at custom styling for our select dropdowns. They've always looked a little out of place on pages like this...

Context before

Context after

Safari 8.0.6

Retina

IE11 Windows 7

cc: @mdo @jonrohan

houndci-bot · 2015-06-09T19:35:31Z

scss/_forms.scss

+  }
+
+  &::-ms-expand {
+    opacity:0;


Colon after property should be followed by one space

jonrohan · 2015-06-09T20:39:44Z

scss/_forms.scss

+  padding: 7px 24px 7px 8px;
+  vertical-align: middle;
+  background-color: #fff;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAaCAMAAACNQ/wIAAAAYFBMVEUzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMS2aZBAAAAH3RSTlMAAQYNDg8VJDQ2N0JbdXZ4h4mKpL3Iycvb6vDx8vn+GLdSCAAAAHBJREFUeNq90TcSgDAMRFGRMwZMTnv/W+IBm6BxzSt/pUBGURKT73v+LdkGbNm7xDOUOXlKNOE0RaaEI7QxvIrX4db5pLgtXlqXyJH4kA5VYCr6Xw2msYxqWUgJetyGwH4cfkIjXaCsqfUd/GmMEKQdADIVzQIQilIAAAAASUVORK5CYII=) no-repeat right 8px center;


We don't typically base64 images, but not saying it's a bad thing. Just asking the obvious if we're cool with this.

I'm fine doing this as a static asset someplace, but would need advice as to how we set that up.

Let's leave it as base64 since Primer itself has no CDN.

jonrohan · 2015-06-09T20:41:03Z

Overall I'm 👍 on this kind of improvement. I personally would like it to look slightly closer to our buttons than our text boxes, just to give it a little more dropdownish feel. And to indicate that it's clickable.

jonrohan · 2015-06-09T20:49:51Z

An afterthought, if we go down this road, should we make our other custom dropdowns match? Or at least use the double arrow icon?

aaronshekey · 2015-06-09T21:02:25Z

I'm fine with there being a difference between true select boxes having the double arrow and the drop downs having the single. The former is a true form element where the latter is just a navigation item. I can add a stronger gradient to match the buttons, but I'll defer to @mdo on the direction we want to go with that. I like that these are currently the inverse of an input.

mdo · 2015-06-09T21:04:13Z

I'm actually kind of okay with making it look a bit different than our buttons and custom .select-menu component. The behavior is a lot different between those two elements, so conflating the two could be harmful from a UX side.

Originally I wasn't into the bottom-up shadow, but it feels push-y enough and looks pretty good still. I think the arrow needs to be a little more to the left, but that's about it.

Lastly, we might want to add some basic styles to ensure proper vertical alignment of non-styled <select>s. For example, we're changing the height there—should we do that for all <select>s? Bootstrap does this, which triggers the fallback styles for Webkit browsers, but it's a consistent height and alignment which is more helpful I think.

aaronshekey · 2015-06-09T22:21:43Z

I've now added fallback styling to the select element, which basically means I've moved most of the visual styling to the element itself save for the arrow overrides.

Safari

Chrome

Should be rad. Selects also take the same styling as their input counterparts in Form Groups

…rence vendor prefixes

… it's a select[multiple]

…w i nuked from the regular select to just the .select

…lement name for the heading

houndci-bot · 2015-06-10T19:42:18Z

scss/_forms.scss

+  background-size: 9px 13px;
+  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
+  // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
+  -webkit-appearance: none;


Avoid vendor prefixes.

mdo · 2015-06-10T19:45:19Z

Pushed a bunch of changes clean up a few things:

Broke apart the default and custom selects to better explain what each does.
Updated the default <select> styles to target any element that doesn't have [multiple].
Renamed .select-small to .select-sm to match our buttons.
Fixed the broken form group styles example.
Excluded the forms file from SCSS lint to avoid those vendor prefix warnings.

Here are some updated screenshots showing the latest:

houndci-bot · 2015-06-10T19:58:21Z

scss/_forms.scss

+  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
+  // scss-lint:disable VendorPrefix
+  // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
+  -webkit-appearance: none;


Avoid vendor prefixes.

This reverts commit 244a732.

jonrohan · 2015-06-10T20:06:43Z

no idea what is wrong with houndci

aaronshekey · 2015-06-10T22:21:28Z

Loving where this is at. @mdo, Thanks for jumping in and fixing the last bits.

Sidenote: Maybe we should consider switching to postcss https://github.com/nDmitry/grunt-postcss instead of the deprecated thing we've got going on now.

mdo · 2015-06-11T01:59:23Z

Sidenote: Maybe we should consider switching to postcss https://github.com/nDmitry/grunt-postcss instead of the deprecated thing we've got going on now.

What's deprecated?

aaronshekey · 2015-06-11T03:14:08Z

Is this what we're using? https://github.com/nDmitry/grunt-autoprefixer It's been deprecated in favor of grunt-postcss.

mdo · 2015-06-12T18:46:26Z

Oh, yeah, we can do that for this release.

Conflicts: css/.primer-stats.md css/primer.css

…select-boxes

Custom select box styling

Add Windows emoji fonts to font fallback list

Custom select box styling

9af448e

houndci-bot reviewed Jun 9, 2015
View reviewed changes

scss/_forms.scss

}

&::-ms-expand {

opacity:0;

Copy link

houndci-bot Jun 9, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colon after property should be followed by one space

Formatting

2e57103

jonrohan reviewed Jun 9, 2015
View reviewed changes

Fallback styling

6b71ca9

mdo added this to the v2.3.0 milestone Jun 10, 2015

mdo added type: enhancement css labels Jun 10, 2015

mdo added 12 commits June 10, 2015 12:37

exclude forms.scss from hound and scss-lint because we need the appea…

2b56e65

…rence vendor prefixes

don't box-shadow default selects, and don't apply our styles to it if…

047edbe

… it's a select[multiple]

comment and formatting

fd2bfd5

comment on why we need appearance vendor prefixes, move the box-shado…

838effd

…w i nuked from the regular select to just the .select

ms-expand comment

9854cd6

rename .select-small to .select-sm to match .btn-sm

c490df9

override the .markdown-body dl styles for our docs examples

324f630

elaborate on what gets customized for default selects; use just the e…

e9b4f2c

…lement name for the heading

break out default and custom selects

7cf7bac

mention why we use .select-sm

6a0719d

remove unnecessary class

e312b89

grunt

6c19797

houndci-bot reviewed Jun 10, 2015
View reviewed changes

mdo and others added 2 commits June 10, 2015 12:46

fix exclude for vendor prefixes

aa02645

disable vendor prefix another way

244a732

houndci-bot reviewed Jun 10, 2015
View reviewed changes

Revert "disable vendor prefix another way"

fcf1c00

This reverts commit 244a732.

mdo mentioned this pull request Jun 12, 2015

Switch to grunt-postcss #128

Merged

mdo added 2 commits June 24, 2015 11:57

Merge branch 'master' into select-boxes

962898a

Conflicts: css/.primer-stats.md css/primer.css

Merge branch 'select-boxes' of https://github.com/primer/primer into …

1159eb7

…select-boxes

mdo added a commit that referenced this pull request Jun 24, 2015

Merge pull request #127 from primer/select-boxes

bedf2e4

Custom select box styling

mdo merged commit bedf2e4 into master Jun 24, 2015

mdo deleted the select-boxes branch June 24, 2015 18:58

timv88 pushed a commit to timv88/primer that referenced this pull request Aug 12, 2015

Merge pull request primer#127 from github/windows-emoji

c71352b

Add Windows emoji fonts to font fallback list

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom select box styling #127

Custom select box styling #127

aaronshekey commented Jun 9, 2015

houndci-bot Jun 9, 2015

jonrohan Jun 9, 2015

aaronshekey Jun 9, 2015

mdo Jun 10, 2015

jonrohan commented Jun 9, 2015

jonrohan commented Jun 9, 2015

aaronshekey commented Jun 9, 2015

mdo commented Jun 9, 2015

aaronshekey commented Jun 9, 2015

houndci-bot Jun 10, 2015

mdo commented Jun 10, 2015

houndci-bot Jun 10, 2015

jonrohan commented Jun 10, 2015

aaronshekey commented Jun 10, 2015

mdo commented Jun 11, 2015

aaronshekey commented Jun 11, 2015

mdo commented Jun 12, 2015

Custom select box styling #127

Custom select box styling #127

Conversation

aaronshekey commented Jun 9, 2015

Context before

Context after

Safari 8.0.6

Retina

IE11 Windows 7

houndci-bot Jun 9, 2015

Choose a reason for hiding this comment

jonrohan Jun 9, 2015

Choose a reason for hiding this comment

aaronshekey Jun 9, 2015

Choose a reason for hiding this comment

mdo Jun 10, 2015

Choose a reason for hiding this comment

jonrohan commented Jun 9, 2015

jonrohan commented Jun 9, 2015

aaronshekey commented Jun 9, 2015

mdo commented Jun 9, 2015

aaronshekey commented Jun 9, 2015

Safari

Chrome

houndci-bot Jun 10, 2015

Choose a reason for hiding this comment

mdo commented Jun 10, 2015

houndci-bot Jun 10, 2015

Choose a reason for hiding this comment

jonrohan commented Jun 10, 2015

aaronshekey commented Jun 10, 2015

mdo commented Jun 11, 2015

aaronshekey commented Jun 11, 2015

mdo commented Jun 12, 2015