37 users online (0 members and 37 guests)  


  Results 1 to 3 of 3

Related

  1. Alter javascript NiceForms to work with JumpMenu    Forum: Javascript Forum
    Replies: 3
  2. Stupid little arrow...    Forum: CSS Forum
    Replies: 3
  3. style sheets    Forum: HTML Forum
    Replies: 2
  4. style sheets with the pre tag    Forum: HTML Forum
    Replies: 5
  1. #1
    grassmeyerdesign's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2007
    Posts
    8

    style jumpMenu arrow with css

    I have a jumpMenu that I need to style, see images below for what the current state is and the "goal" of what I need it to look like. I've tried applying a background image but it doesn't show up. Is something like this even possible?

    Page where it's being used:http://earbible.com/

    code for jumpMenu
    Code:
    <select name="lang" class="dropDown2" onchange="jumpMenu('parent',this,0)"><!-- BEGIN: option -->
    <option value="index.php?_g=sw&amp;r={VAL_CURRENT_PAGE}&amp;lang={LANG_VAL}" {LANG_SELECTED} onmouseover="javascript:getImage('language/{LANG_VAL}/flag.gif');">{LANG_NAME}</option><!-- END: option -->
    </select>
    css for dropDown2
    Code:
    .dropDown2 {
        width: 190px;
        background-color: #FFFFFF;
        border: 1px solid #999999;
        font-size: 11px;
        color: #000000;
        margin:5px;
        }
    javascript for jumpMenu
    Code:
    function jumpMenu(target, object, restore) { 
        eval(target+".location='"+object.options[object.selectedIndex].value+"'");
        if (restore) object.selectedIndex=0;
    }
    I have tried this code to get a background image to show, but it doesn't
    Code:
    {
        width: 160px;
        background-color: #FFFFFF;
        border: 1px solid #999999;
        font-size: 11px;
        color: #000000;
        background-image:url(../images/txtINPT.gif);
        background-position:top left;
        background-repeat:no-repeat;
        margin:5px;
        }
    Please let me know if it is possible to change the look of the arrow to be an image and be used across all browsers.

    Thanks!

    Jen
    Attached Images Attached Images

  2. #2
    skym's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Location
    Oradea, Romania
    Posts
    10

    Re: style jumpMenu arrow with css

    Check out this javascript library to style form elements:
    http://www.badboy.ro/articles/2005-07-23/niceforms_preview/

  3. #3
    grassmeyerdesign's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2007
    Posts
    8

    Re: style jumpMenu arrow with css

    Wow! Thanks for the awesome link!

    Jen



Tags for this Thread