{"action":"created","issue":{"url":"https://api.github.com/repos/axa-ch/style-guide/issues/467","repository_url":"https://api.github.com/repos/axa-ch/style-guide","labels_url":"https://api.github.com/repos/axa-ch/style-guide/issues/467/labels{/name}","comments_url":"https://api.github.com/repos/axa-ch/style-guide/issues/467/comments","events_url":"https://api.github.com/repos/axa-ch/style-guide/issues/467/events","html_url":"https://github.com/axa-ch/style-guide/pull/467","id":157938049,"number":467,"title":"Improvement/dropdown css only","user":{"login":"AndyOGo","id":914443,"avatar_url":"https://avatars.githubusercontent.com/u/914443?v=3","gravatar_id":"","url":"https://api.github.com/users/AndyOGo","html_url":"https://github.com/AndyOGo","followers_url":"https://api.github.com/users/AndyOGo/followers","following_url":"https://api.github.com/users/AndyOGo/following{/other_user}","gists_url":"https://api.github.com/users/AndyOGo/gists{/gist_id}","starred_url":"https://api.github.com/users/AndyOGo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AndyOGo/subscriptions","organizations_url":"https://api.github.com/users/AndyOGo/orgs","repos_url":"https://api.github.com/users/AndyOGo/repos","events_url":"https://api.github.com/users/AndyOGo/events{/privacy}","received_events_url":"https://api.github.com/users/AndyOGo/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/axa-ch/style-guide/labels/hacking","name":"hacking","color":"5319e7"},{"url":"https://api.github.com/repos/axa-ch/style-guide/labels/improvement","name":"improvement","color":"84b6eb"}],"state":"open","locked":false,"assignee":{"login":"davidknezic","id":198988,"avatar_url":"https://avatars.githubusercontent.com/u/198988?v=3","gravatar_id":"","url":"https://api.github.com/users/davidknezic","html_url":"https://github.com/davidknezic","followers_url":"https://api.github.com/users/davidknezic/followers","following_url":"https://api.github.com/users/davidknezic/following{/other_user}","gists_url":"https://api.github.com/users/davidknezic/gists{/gist_id}","starred_url":"https://api.github.com/users/davidknezic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidknezic/subscriptions","organizations_url":"https://api.github.com/users/davidknezic/orgs","repos_url":"https://api.github.com/users/davidknezic/repos","events_url":"https://api.github.com/users/davidknezic/events{/privacy}","received_events_url":"https://api.github.com/users/davidknezic/received_events","type":"User","site_admin":false},"milestone":null,"comments":5,"created_at":"2016-06-01T15:33:30Z","updated_at":"2016-06-02T06:23:25Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/axa-ch/style-guide/pulls/467","html_url":"https://github.com/axa-ch/style-guide/pull/467","diff_url":"https://github.com/axa-ch/style-guide/pull/467.diff","patch_url":"https://github.com/axa-ch/style-guide/pull/467.patch"},"body":"Hey all\r\n\r\nThis aims to fix #466 \r\n\r\nYou can check it out in the dropdown section - CSS-only.\r\n\r\nThis solution is utilizing floats and negative margins to the rescue.\r\n\r\n---\r\n\r\nThe current Dropdown is utilising JS to make it stylable.\r\nWe can improve this with CSS appearance rule on window-based elements like input, select, etc.\r\n\r\nOriginally I developed such a fancy but JS-less dropdown for [m.tutti.ch](http://m.tutti.ch) (*IMPORTANT*: visit it with a mobile User Agent)\r\n\r\n![dropdown_m tutti ch mov](https://cloud.githubusercontent.com/assets/914443/15715242/00f991fa-281e-11e6-948f-e05ba56d050a.gif)\r\n\r\nThis concepts had to meet the following prerequisites:\r\n - Allow for icons before and after the dropdown`s label\r\n - Allow for fancy styling with CSS3\r\n - avoid `z-index` (cause of `z-index` issues with old iOS devices)\r\n - gracefull fallback to OS specific rendering\r\n - instant rendering (no Flash caused by JS)\r\n - adding a X-Icon to reset the dropdown (JS-enhanced, optional)\r\n - Expects to fit the containing block's size (fluid and 100% width)\r\n - User should use the native platform specific UI to select an option\r\n\r\n*Issues*\r\n - older Firefox version didn't remove their native arrows in spite of -moz-appearance: none (can be fixed)\r\n - `<select>` elements are window-elements and hence not reliable to style with rules like `line-height` and `vertiacal-align: middle` (can be fixed with padding)\r\n\r\n*Important Refs*:\r\n - [CanIUse](http://caniuse.com/#feat=css-appearance)\r\n - [CSS-Tricks](https://css-tricks.com/almanac/properties/a/appearance/)\r\n - [IE supports -webkit- oo](https://msdn.microsoft.com/en-us/library/dn793580(v=vs.85).aspx)\r\n - [fix IE Selectbox arrows](https://msdn.microsoft.com/en-us/library/hh771821(v=vs.85).aspx)\r\n - [fix IE active value blue bg](https://msdn.microsoft.com/en-us/library/windows/apps/hh465820.aspx)\r\n - [StackOverflow](http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript)\r\n - [FF double `text-indent` issue](http://stackoverflow.com/questions/28108434/firefox-select-element-doubles-text-indent-value)"},"comment":{"url":"https://api.github.com/repos/axa-ch/style-guide/issues/comments/223205780","html_url":"https://github.com/axa-ch/style-guide/pull/467#issuecomment-223205780","issue_url":"https://api.github.com/repos/axa-ch/style-guide/issues/467","id":223205780,"user":{"login":"AndyOGo","id":914443,"avatar_url":"https://avatars.githubusercontent.com/u/914443?v=3","gravatar_id":"","url":"https://api.github.com/users/AndyOGo","html_url":"https://github.com/AndyOGo","followers_url":"https://api.github.com/users/AndyOGo/followers","following_url":"https://api.github.com/users/AndyOGo/following{/other_user}","gists_url":"https://api.github.com/users/AndyOGo/gists{/gist_id}","starred_url":"https://api.github.com/users/AndyOGo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AndyOGo/subscriptions","organizations_url":"https://api.github.com/users/AndyOGo/orgs","repos_url":"https://api.github.com/users/AndyOGo/repos","events_url":"https://api.github.com/users/AndyOGo/events{/privacy}","received_events_url":"https://api.github.com/users/AndyOGo/received_events","type":"User","site_admin":false},"created_at":"2016-06-02T06:23:25Z","updated_at":"2016-06-02T06:23:25Z","body":"Oooh my hooooly madness, this double `text-indent` bug is still there. check this [fiddle](http://jsfiddle.net/k92dvxte/1/) in newest firefox."}}
{"actor":{"display_login":"AndyOGo"}}