javascript - Cannot center my menu option items -
i'm having trouble centering items within dropdown menu. i've tried many things suggested on website , none seem work.
here css:
select { -webkit-appearance: button; -webkit-user-select: none; -webkit-padding-start: 6px; -webkit-padding-end: 6px; background-color: #050505; color: #ffffff; border: 1px solid #ffffff; box-shadow: 11px 10px 5px #000000; text-shadow:4px 4px 10px #000000; font-family: "uglyqua", arial, helvetica, sans-serif; font-size: 20px; font-weight: bold; padding-top: 2px; padding-bottom: 2px; text-align: center; white-space: nowrap; }
..and html:
<!doctype html> <html> <head> <script language="javascript" type="text/javascript"> function jump(form) { var myindex=form.menu.selectedindex if (form.menu.options[myindex].value != "0") { window.open(form.menu.options[myindex].value, target="iframe1"); } } //--> </script> </head> <center> <body> <form name="lissamenu2" action=uri> <select name="menu" onchange="jump(this.form)"> <option value="0" selected>select site:</option> <option value="http://www.google.com/">google</option> <option value="http://www.youtube.com/">youtube</option> <option value="http://www.stackoverflow.com/">stackoverflow</option> </select> </form> </center> </body> </html>
select
/option
cannot accept same styling @ regular html elements since these more closely-tied os. you'll notice select
differently on mac , pc. if want more control you're best use javascript-based replacement.
see: http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/
Comments
Post a Comment