|
CSS - Need Help With Form Select Properties
Hi,
I've got a simple page that includes a total of 15 of these: Code: <FORM name="DropdownIndex" style="margin:0"> <SELECT name="URL" width="500" text="black" onChange="if(options[selectedIndex].value) window.location.href=(options[selectedIndex].value)"> <OPTION value=""></OPTION> <OPTION value=""></OPTION> </SELECT></FORM> (Each one is inside it's own single-celled table, all of which are nested inside other tables.) In the document's <head></head> I have Code:
<style type="text/css">
select {width:500px;color:#00ff00;background-color:#000000;font-size:12pt;font-family:Gill Sans MT,Verdana;}
</style>
which controls all the form-selects on the page. How do I write things so that I can assign different properties to groups of forms, without having to insert the properties on each and every form-select? Hope I'm being clear, Thanks, Ez Similar TutorialsI've been searching for ways to graphically customise my select boxes (<SELECT>) in HTML, using CSS. So far, I've been successful in changing some basic stuff, like the background color & font, however, what I would really like to do is do more like change the border, scrollbar color etc. However, I tried doing so, but it seems to me the SELECT element isn't quite customisable this way. I checked this forum for some help, and googled my way out of this, yet no luck. So, I was wondering if someone would be able to shed some light on my issue, as I think it's really weird, being able to customise just about every form element, except the ugly default combobox... Any help appreciated! Hi. I have a form in a php script where among other fields the visitor picks a color from a select tag. I can manage the select list with the following code: <option style={background:red;} value=1>red</option> <option style={background:yellow;} value=1>yellow</option> ...and so on... but when I use the select to pick a color the browser highlights my selection using blue color. The problem is that this blue overwrites my color so the visitor can see all the other colors but not the one he is choosing ... Is there a way to control the highlighting color of the select tag? Sorry if this has been answered before... i couldn't find an answer... Please take a look at my css form he http://www.pearl.ru/isdunyasi/admin/default[1].htm For some reason row under select boxes dislocated. I couldnt figure out why. Any help appreciated. Code:
/**************** Form styles ****************/
fieldset {
margin:1em 0;
border:none;
border-top:1px solid #aaaaaa;
}
legend {
color:#aaaaaa;
background:transparent;
font-size:14px;
font-weight:bold;
}
label {
float:left;
width:100px;
padding:0 10px;
text-align:right;
}
fieldset div {
margin-bottom:.5em;
padding:0;
display:block;
}
fieldset div input,fieldset div textarea {
width:150px;
border-top:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #aaaaaa;
border-right:1px solid #aaaaaa;
padding:1px;
}
#Submit input {
border:1px solid #d7d7d7;
padding:2px;
background:#aaaaaa;
color:#FFFFFF;
font-weight:bold;
}
fieldset div.Req {
font-weight:bold;
}
im trying to get an effect like this one, where when a textfield or form area is selected, the div around changes bgcolor WooFoo I think i might be able to use the pseudo selectors but not sure if ie will take it. Anyways i would love some suggestions! New to this but with due diligence, will learn this......I have built asp update form to allow users to enter new data into the database. They are wanting to change new text entries into blue rather than using the default color (black). This highlights those new entries for those reviewing the data. I have googled for methods ranging from radio buttons to check boxes to define a new font color with no luck so far....any help is greatly appreciated............best case I think, would be a font tool bar added to the form, but have not found that method thanks I'm trying to write a function that will resize a few <div>s on my page when it loads. Before I got too far, I wrote a simple function to alert the current height of each <div> to be resized. It looks like this: Code: function resizeDivs()
{
var saidDivs = new Array("cBodyMid", "cLeftPane", "cLeftPanelData", "cRightPaneData");
for(i=0;i<saidDivs.length;i++)
{
var el = document.getElementById(saidDivs[i]);
curElHeight = el.style.height;
alert(curElHeight);
}
}
All I get is 4 empty alert boxes. All of the styles are defined in an external style sheet a la: Code: #myDiv {
height: 25px;
}
and they are all assigned to <div> tags a la: Code: <div id="myDiv">here's my div</div> However, if I create a div with the height specified as an inline style, it works. I've got to be missing something really simple here. Anyone know how to get that height property? You know how you can modify Mozilla css with properties like css Code: Original - css Code -moz-border-radius: 4px 4px 4px 4px; -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-top-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-left-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-radius: 4px 4px 4px 4px; Is it possible to get something like this to work with IE? See on F/F the box is rounded.. but on IE its just a complete square ( duh that's because I'm modding Mozilla css properties ). I see that document.getElementById('foo').style.width is a valid property, but yet I see documentation which accesses the style's properties as an array element, example: document.getElementById('foo').style['width']. Are both equivalent? What would be the property equivalent for 'text-align'??? document.getElementById('foo').style.textAlign?? Where can I find the docs for this? Hey all, I'm developing an app for a client, and I've implemented quite a bit of it already, and it includes CSS. Code:
<style>
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
}
</style>
As you all might know, this changes all <td> tags into this particular style. Is there a class that I can include that contains NO properties (default)? I'm not even sure if it's possible. I just don't want to go back and add class tags everywhere. Is it necessary to declare properties like : border-bottom:none; text-transform:none; My question is why would I declare them (above) ? Is it not assumed that unless I need something like text-transform:lowercase; I should not declare text-transform:none; ...this just add up more unnecessary lines of code. What are the default properties of selectors? if not declared would it be safe to asumme that those defaul to 0, none, etc depending of the selectors? tahnks I have a style for links that I use in my main navigation menu, like so: Code:
a.main_nav
{
color:#FFFFFF;
font-size:12px;
}
a.main_nav:link{ text-decoration: none }
a.main_nav:visited{ text-decoration: none }
a.main_nav:active{ text-decoration: none }
a.main_nav:hover{ text-decoration: underline; }
How can I wrap all the links in a <div> and not have to specify the class on each <a> ? I noticed that if you place a border around an object with all sides having different colors, that a diagonal appears in each corner where the two colors meet. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#my_id {
width: 100px;
height: 100px;
border-top: 10px solid red;
border-bottom: 10px solid green;
border-left: 10px solid blue;
border-right: 10px solid black;
</style>
</head>
<body>
<div id="my_id"> </div>
</body>
</html>
Is there anyway to override this so that for example the bottom border extends from left to right edge at a height of 10px (using the above example) instead of gradually decreasing the height as it nears the edge? Edited to add: I know that I could achieve this effect by nesting divs but I was curious as if there was a simpler solution. I want the iframe to have a horizontal scrollbar but no vertical scrollbar. My code I've been attempting looks like this: Code: <iframe scrolling="auto" src="quicklinks.php" width="100%" height="200" name="helpContent" style="overflow-x: visible; overflow-y: hidden"></iframe> Is this possible? If so, is it compatible with all browsers? I know many of you are going to say, well you have it on auto and if you don't want it to scroll vertically, don't have a page in the iframe that is too high in height. However the page has dynamic thing submitted to it and there might be the possibility that a user submits a name too long and I don't want to deal with only showing a certain length of the string. Hi! Does anybody have some great link or book advice about all the properties of the DIV and/or LAYER - tags? Inspiring examples with javascript to this are also welcome. I will use it to build advanced layer functionality. Regards Bjorn I am confused by the "rules" of how to indicate what you are trying to style when an element is within other elements. Specifically in this case (but hopefully this lesson will be portable to other contexts). I have a UL with an LI (classed) that is within an id'd UL that is within an id'd DIV. Code: <div id="horzmenu">
<ul id="horznavmenu">
<li><a href='rooms.php'>Accomodations</a></li>
<li class='hot'>Location & Info
<ul>
<li><a href='/otherprops.php'>Other Properties</a></li>
<li><a href='/news.php'>News & Photos</a></li>
</ul>
</li>
<li><a href='booking.php'>Booking</a></li>
</ul>
</div>
So if I were to wish to style this new UL and its LI's do I refer to: The parent UL as in: #horznavmenu ul ul { The parent UL and the class'd LI as in: #horznavmenu ul ul li.class{ Or? Thanks in advance for any feedback or suggested reading... Guys I have the following issue regarding links and colours: The colours of links are set thus: a:link : White; a:hover : Blue; a:visited : White; The problem I have is that I want a hovered link to turn blue even if it has been visited. Is there anything I can do about this...? Hi, I've seen things like this in CSS elsewhe Code: <style type="text/css"><!--
td[width="350"] {
background-color: #FFFFFF;
}
--></style>
The above is just an example, and it might not even be what I'm looking for. But it appears that the above would only change the background color of a table cell that is 350 pixels wide (no other table cells will be changed)? Is this how this is done? And if not, I'm trying to do something along that concept, somewhat like this: Code: <style type="text/css"><!--
table[border="2"] td .classname {
color: #FFFFFF;
font-family: verdana;
}
--></style>
If this doesn't make sense, I'll try to reexplain. But if this can be done I'd be ever so grateful. Thanks! ~Kevin Hi Below there are three tables. first one is separated but the second one is inside the third one. Although I have set padding and border-collapse to collapse and padding to 0px but they don't appear the same size on the screen. table 3 is bigger than table 1. is there any property that I can set to 0 so table 3 appears the same size as table 1? PHP Code: <STYLE> table{ border-collapse:collapse; } td{ padding:0px; } </STYLE> <TABLE STYLE='background-color:red;width:800px;border:1px solid black;'> <TR> <TD> </TD> </TR> </TABLE> <TABLE STYLE='background-color:red;width:800px;border:1px solid black;'> <TR> <TD> <TABLE STYLE='background-color:red;width:800px'> <TR> <TD> </TD> </TR> </TABLE> </TD> </TR> </TABLE> I am having two problems with my tables right now: Within the style sheet, I have the following: table { border: thin #0000CC; } If I am not mistaken, this should make all tables that have a border of 1 or greater to automatically be thin and blue. This is not working... Why not? D Hi All, I'm pretty confused by this. Work ins IE6 but not in Firefox 1.0.4 I've uploaded the offending page below... http://www.bertucci.net/nwhc/index2.php I moved the relavent CSS into the HTML and commented out the linking sheets. The problem... at seemingly random places the hover properties do not work. On hover, the link should be underlined. Some links will work right, while others do not. I've done many googles and a Dev Shed search with no answers so far, so I'm making a post here for help. The page is a mix of DIV and TABLE elements. I just think it's easier for me to work with. A Side question, is this an 'ok' practice or should sites be designed strictly DIV or TABLE only? (All styles for DIVs are right in the DIV I have not broken them out yet until the design is hammered down). Cheers, Fozzy |
|||||||