CSS - Can I Use Css To Change The Style Of Html List Boxes And Buttons?

on my site i have a few drop down boxes, ive used css to change the textboxes and submit buttons, but is there a way to change the arrows/buttons on a drop down list?

I have been trying various methods to change the color of the scrollbar of an object in my HTML page. However it remains at gray.

The HTML code is as follows:

<OBJECT NAME="foo" CLASSID="qeroeure" STYLE="scrollbar-base-color:red" CODEBASE="blah" WIDTH="700" HEIGHT="500" BORDER="3">"Cannot load image control."
</OBJECT>

This does not change the scrollbar color to red. What do I do to change the scrollbar color

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

I have a list that I've created with the list-style-type being an image.

For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly?

Below is the code. The cell that these lists sit in has has an id of 'cellid'.

Code:

#cellid {
margin: 0 0;
padding: 0 0;
}

#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}

#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}

The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space?

Thanks,

Brian

the code below draws a nice hairline textbox

<input type='text' name='name' style="border:1px solid black; font-size: 10px; font-family: arial">

the colde below draws a nice hairline texarea

<textarea name='msg' rows='10' cols='40' style="border:1px solid black; font-size: 12px; font-family: arial">

but the code below doesn't change anything

<select name='sel' style="border:1px solid black; font-size: 10px; font-family: arial">
<option value='1'>first</option>
<option vakue='2'>second</option>
</select>


Is there a way to remove this ugly shade from a selection menu as it exists for textboxes and textareas?


Thanks for your help!