Css focus on button is working in Edge and in Chrome, but in Firefox and IE is not -
i'm loking on stack , on internet find solution fix problem
button:focus
i had creade dropdown focus menu, example (http://koen.kivits.com/articles/pure-css-menu/)
my css code:
.dropdown-button:focus > .dropdown-list { display: block; visibility: visible; } .dropdown-button { padding-left: 0; text-decoration: none; display: list-item; box-sizing: border-box; position: relative; list-style-type: none; height: 100%; } .dropdown-list { padding-left: 0px; position: absolute; background-color: @action-dropdown; min-width: 180px; z-index: 1; text-align: left; border: 1px solid @action-border; display: none; transition: display 0.2s; }
and html:
<button class="button button-border btn-large" ng-disabled="!hashmap['object:1'].active" ng-click="hashmap['object:1'].actionevent()"><span class="hint">press on me expand buttons</span> <ul class="dropdown"> <li class="dropdown-button" tabindex="0"><span ng-bind-html="hashmap['object:1'].icon" class="icon ng-binding"><i class="fa fa-ship"></i></span><span class="block"><span ng-bind="hashmap['object:1'].name" class="text ng-binding">vessel visit</span><i class="fa fa-caret-down"></i></span> <ul class="dropdown-list"> <li class="dropdown-button"> <button class="button button-border inline-style" ng-disabled="!hashmap['object:2'].active" ng-click="hashmap['object:2'].actionevent()" disabled="disabled"><span ng-bind-html="hashmap['object:2'].icon" class="inline-icon ng-binding"><i class="fa fa-reply"></i></span><span ng-bind="hashmap['object:2'].name" class="inline-text ng-binding">btn1</span></button> </li> <li class="dropdown-button"> <button class="button button-border inline-style" ng-disabled="!hashmap['object:3'].active" ng-click="hashmap['object:3'].actionevent()" disabled="disabled"><span ng-bind-html="hashmap['object:3'].icon" class="inline-icon ng-binding"><i class="fa fa-reply"></i></span><span ng-bind="hashmap['object:3'].name" class="inline-text ng-binding">btn2</span></button> </li> <li class="dropdown-button"> <button class="button button-border inline-style" ng-disabled="!hashmap['object:4'].active" ng-click="hashmap['object:4'].actionevent()" disabled="disabled"><span ng-bind-html="hashmap['object:4'].icon" class="inline-icon ng-binding"><i class="fa fa-arrows"></i></span><span ng-bind="hashmap['object:4'].name" class="inline-text ng-binding">replan</span><span class="hint">btn3</span></button> </li> </ul> </li> </ul>
in google chrome (version 56) , microsoft edge (version 38) working.
but on otherside in mozilla firefox (version 52) , internet explorer (version 11)
Comments
Post a Comment