|
CSS - Can Css Change The Style Of A Drop Down List?
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?
Similar TutorialsHey all, i can't find out anywhere if i can use css to change the style of html menus and buttons...Id just like the menu to look a little different, ie different button and different colour background and text..etc any ideas or help would be appreciated thanks RF 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 Hi, Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side? /Hubba Bubba On the title of my gallery one of the words has moved to the second row. There is obvious room before the text hits the search box so I'm hoping to have all the text on the same row. This is what I've found for the gallery title CSS: #gallerytitle { padding: 10px 10px 10px 20px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; background: #F8F8F8; height:30px; border-bottom: 1px solid #CCC; What would I change there (if that is indeed the part that needs to be changed) to get the desired effect? Here is the site where you can see the gallery title issue. EDIT: I guess I can't link to my site. Hmm. It's kind of hard to describe what my problem is. I appreciate any help Hi there, I have a list which I want to display the sub items without any left spacing.. so they are listed directly beneath the parent item. It works fine in IE, but not in FF or Opera. This is what I have: Code:
<ul id="treemenu1" class="treeview" style=" padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 10px; padding-left: 0px;" >
<li style="list-style: none;">
<img src="images/arrow.gif" border="0" >
<a class="nav_main" href="#"><strong>Parent Item</strong></a>
</li>
<ul style="list-style: none;">
<li style="border-bottom: 1px dashed #444444; padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 0px; "><a class="nav_sub" href="page"><img src="images/arrow.gif" border="0" >Sub Item</a></li>
etc...
I have tried use margin-left: 0px but that still doesn't work. Any ideas what I'm doing wrong? hi, how do I style a drop box so it is flat not sunk in? Hi guys... Would u mind to see this site I'm working ... http://diario.coldfusion-vpm.com It is being done in Mambo (www.mamboserver.com) And i would like to know why it sees OK in Firefox but it sees bad in IE, specially left & middle colum, they see overlapped, very strange CSS file: http://diario.coldfusion-vpm.com/templates/maiputotal/css/template_css.css thanks a lot in advance Hey all, I am having a little trouble with some stylesheet/javascript. I am trying to change the style on mouse over of another element. I have a DL with one DT & and one DD. I would like to be able to change the style of the DD on mouse over the entire DL. I'd like to change the class 'background' to 'backgroundOver'. The code: Code:
<dl>
<dt>
<p>Text</p>
</dt>
<dd class="background">
<p>Text</p>
</dd>
</dl>
Any help with this would be much appreciated. Cheers in advance. i have a link which has some parenthesis within the anchor tags, now what i was wondering was whether i could change the style (colour to be exact) of the parenthesis without adding extra tags into the html. Thanks for any assisstance eg: Order By (DESC) to become Order By ( DESC ) I have the ul style specifically assigned where I want, but another style is overriding it. I'm using the same script on a different site and it works fine. The style sheets for the two sites are similar, but there are a few minor differences. But I don't really want to make big changes that would affect other pages in the site. Here's the style that I suspect is overriding the one I want to use: ul {margin: 0px; padding: 0px} ul li {margin: 0px 0px 0px 8px; padding: 3px 0px 0px 10px; background-image:url(../arrow.gif); background-repeat:no-repeat; background-position: 0px 7px; list-style-image:url(../spacer.gif)} ul ul li {margin: 0px 0px 0px 8px; padding: 3px 0px 0px 10px; background-image:url(../reddot.gif); background-repeat:no-repeat; background-position: 0px 7px; list-style-image:url(../spacer.gif)} And here's the style I've applied to that one section of the page: ul.list_specials li { list-style-type:none; } Unfortunately, I'm too new to the boards and can't put links in my posts yet. Otherwise I could send links from the two different sites. What am I doing wrong? Thanks, Ann I am trying to use ul list to organize my images. Here is how it should look like. IMAGE IMAGE IMAGE text text text But instead, I get IMAGEtext IMAGEtext IMAGEtext Code:
<style>
/**************************************************************
Thumbnail Lists
**************************************************************/
ul.thumbs,
ul.thumbs li {
margin: 0;
padding: 0;
}
ul.thumbs li {
margin: 0 0 15px 0 !important;
margin: 0;
padding: 0px;
list-style: none;
}
ul.thumbs li.pagination {
margin: 10px;
padding: 0px;
list-style: none;
display:block;
}
a.thumb img {
border: 5px solid #ccc;
}
a:hover.thumb img {
background: #8EB4C6;
border: 5px solid #000;
}
a:hover.thumb {
background: none;
}
a.thumb span {
width: 100%;
display: block;
margin-top: -5px !important;
margin-top: -2px;
}
</style>
<ul class="thumbs">
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/8P5B7K8M_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=13" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/7K4V6F7H_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=12" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/0C7O9X0A_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=11" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/1Q8B0L1N_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=10" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li class="pagination">1. </li>
</ul>
Hello, I have the ff: style Code:
.most_popular_content { background-color:#cdd6ea; }
ol { margin:0px 10px 0px 20px; padding:0px 0px 0px 9px; }
li { list-style-image:url(raquo.gif); padding-bottom:10px; padding-left:2px; padding-top:10px; }
and have this html Code:
<div class="most_popular_content">
<ol>
<li>sdfsdf</li>
<li>sdfsdf</li>
<li>sdfsdf</li>
<li>sdfsd</li>
</ol>
</div>
Now my problem is in IE. The above code will correclt display in Mozilla and even on the dreamweaver design. On IE the list-style image is displayed on top of the text, it's something that my text is align in bottom while the image is on top. On Mozilla everything works fine since the image and texts are all align. Please help! Can someone explain why the first example here does not work while the second does? Thanks. .top_anchor_links li { list-style-image: url(../img/li_star_white_bg.gif); } li.top_anchor_links { list-style-image: url(../img/li_star_white_bg.gif); } <ul> <li class="top_anchor_links">list 1</li> <li class="top_anchor_links">list 2</li> <li class="top_anchor_links">list 3</li> <li class="top_anchor_links">list 4</li> </ul> Please look at this page - http://www.tmhdesign2.com The list nav up at the top I have a bg image for the a tag and want to not display the bullet for the <li> but list-style-top:none does not work... So far I've been unable to find the answer to this question despite numerous Google searches, and am sincerely hoping someone here can give me the definitive answer. I have an unordered list which requires use of the decimal-leading-zero list style type. However, I need to start the number at 00 instead of 01. In HTML the way you do this is to put inside the UL tag start="0", but this is not validatable, and actually deprecated. How can I begin a list with 00 rather than 01 for the decimal-leading-zero list-style-type? TIA for all help and advice. I dont get what is my list styles for the footer content section. listed items dont appear listed and I could not vertically center the div. Footer content section is right above the copyright notice. http://www.aslanyurek.com/rtt/ Code:
/* content footer.css */
#fcontent{
height:80px;
width:790px;
background-color:#999999;
}
#fcontent .help{
float: left;
height: 60px;
width: 300px;
vertical-align:middle;
background-color:#FFFFCC;
}
#fcontent .catalog{
float: left;
height: 60px;
width: 300px;
vertical-align:middle;
margin-left:10px;
background-color:#F0FFCC;
}
#fcontent li {
float:left;
list-style-type:square inside;
margin-left:25px;
}
#fcontent li a {
display:block;
}
Hi, Can't see what is wrong with this line.. maybe i'm being blind? <option style="font-family: verdana; font-size: 10px;" value="http://www.link here.com">LINK HERE</option> Any ideas? i have a main page with an iframe.. my iframe contain most of my data.. there are 4 types of css for the user to choose.. i have create 4 css.. 1.css, 2.css, 3.css and 4.css... when they user clicks on the first link, the iframe will load 1.css.. if the user clicks on the 2nd link, the iframe will load 2.css.. what shld i do to attain that? |
|||||||