html - How to remove blue highlight color in dropdown foundation 5? -
i'm creating dropdown menu toggle right of sidebar. want remove blue color around dropdown menu. i'm using foundation 5 create dropdown menu.
here screenshot of dropdown i've made
below css , html code used
.f-dropdown1 { display: none; left: -9999px; list-style: none; margin-left: 0; position: absolute; background: #ffffff; border: solid 1px #cccccc; font-size: 0.875rem; height: auto; max-height: none; width: 100%; z-index: 89; margin-top: 2px; max-width: 200px; } .f-dropdown1.open { display: block; } .f-dropdown1>*:first-child { margin-top: 0; } .f-dropdown1>*:last-child { margin-bottom: 0; } .f-dropdown1:before { border: inset 6px; content: ""; display: block; height: 0; width: 0; border-color: transparent transparent #ffffff transparent; border-bottom-style: solid; position: absolute; top: -12px; left: 10px; z-index: 89; } .f-dropdown1:after { border: inset 7px; content: ""; display: block; height: 0; width: 0; border-color: transparent transparent #cccccc transparent; border-bottom-style: solid; position: absolute; top: -14px; left: 9px; z-index: 88; } .f-dropdown1.right:before { left: auto; right: 10px; } .f-dropdown1.right:after { left: auto; right: 9px; } .f-dropdown1.drop-right { display: none; left: -9999px; list-style: none; margin-left: 0; /* position: absolute; */ background: #ffffff; border: solid 1px #cccccc; font-size: 0.875rem; height: auto; max-height: none; width: 100%; z-index: 89; margin-top: 0; margin-left: 65px; max-width: 200px; } .f-dropdown1.drop-right.open { display: block; } .f-dropdown1.drop-right>*:first-child { margin-top: 0; } .f-dropdown1.drop-right>*:last-child { margin-bottom: 0; } .f-dropdown1.drop-right:before { border: inset 6px; content: ""; display: block; height: 0; width: 0; border-color: transparent #ffffff transparent transparent; border-right-style: solid; position: absolute; top: 10px; left: -12px; z-index: 89; } .f-dropdown1.drop-right:after { border: inset 7px; content: ""; display: block; height: 0; width: 0; border-color: transparent #cccccc transparent transparent; border-right-style: solid; position: absolute; top: 9px; left: -14px; z-index: 88; } .f-dropdown1 ul:active { border: 1px solid red !important; } .f-dropdown1 li { cursor: pointer; font-size: 0.875rem; line-height: 1.125rem; margin: 0; } .f-dropdown1 li:hover, .f-dropdown li:focus { background: #eeeeee; border: none; } .f-dropdown1 li { display: block; padding: 0.5rem; color: #555555; } .f-dropdown1.content { display: none; left: -9999px; list-style: none; margin-left: 0; position: absolute; background: #ffffff; border: solid 1px #cccccc; font-size: 0.875rem; height: auto; max-height: none; padding: 1.25rem; width: 100%; z-index: 89; max-width: 200px; } .f-dropdown1.content.open { display: block; } .f-dropdown1.content>*:first-child { margin-top: 0; } .f-dropdown1.content>*:last-child { margin-bottom: 0; } .f-dropdown1.radius { border-radius: 3px; } .f-dropdown1.tiny { max-width: 200px; } .f-dropdown1.small { max-width: 300px; } .f-dropdown1.medium { max-width: 500px; } .f-dropdown1.large { max-width: 800px; } .f-dropdown1.mega { width: 100% !important; max-width: 100% !important; } .f-dropdown1.mega.open { left: 0 !important; } .dropdown.button, button.dropdown { position: relative; padding-right: 3.5625rem; } .dropdown.button::after, button.dropdown::after { border-color: #ffffff transparent transparent transparent; border-style: solid; content: ""; display: block; height: 0; position: absolute; top: 50%; width: 0; } .dropdown.button::after, button.dropdown::after { border-width: 0.375rem; right: 1.40625rem; margin-top: -0.15625rem; } .dropdown.button::after, button.dropdown::after { border-color: #ffffff transparent transparent transparent; } .dropdown.button.tiny, button.dropdown.tiny { padding-right: 2.625rem; } .dropdown.button.tiny:after, button.dropdown.tiny:after { border-width: 0.375rem; right: 1.125rem; margin-top: -0.125rem; } .dropdown.button.tiny::after, button.dropdown.tiny::after { border-color: #ffffff transparent transparent transparent; } .dropdown.button.small, button.dropdown.small { padding-right: 3.0625rem; } .dropdown.button.small::after, button.dropdown.small::after { border-width: 0.4375rem; right: 1.3125rem; margin-top: -0.15625rem; } .dropdown.button.small::after, button.dropdown.small::after { border-color: #ffffff transparent transparent transparent; } .dropdown.button.large, button.dropdown.large { padding-right: 3.625rem; } .dropdown.button.large::after, button.dropdown.large::after { border-width: 0.3125rem; right: 1.71875rem; margin-top: -0.15625rem; } .dropdown.button.large::after, button.dropdown.large::after { border-color: #ffffff transparent transparent transparent; } .dropdown.button.secondary:after, button.dropdown.secondary:after { border-color: #333333 transparent transparent transparent; }<a data-options="align:right" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" href="#" class="left"><i class="fa fa-bell-o" aria-hidden="true"></i></a> <ul id="drop1" class="f-dropdown1" data-dropdown-content aria-hidden="true" tabindex="-1"> <li><a href="#">this link</a></li> <li><a href="#">this another</a></li> <li><a href="#">yet another</a></li> </ul>
either customise scss defaults foundation provides or override them own css file.
if aren't running sass you'll need overrides stylesheet come after foundation 1 don't need silly things use !important.
in example in documentation trigger button "button" class need override class want:
<a class="button" data-dropdown="tinydrop" aria-controls="tinydrop" aria-expanded="false">link dropdown »</a> personally i'd add override rather changing default .button style:
.button.my-dropdown-style {...}
Comments
Post a Comment