CSS - Changing All Form Input Fields Background Color In One Go?
Hi,
Please see http://lbclibrary.org/addtoinquiry.php (scroll down a bit to see the form) What I want to do is, when the user selects "I am a member of ..." or "I want to become a member of..." the form fields in the OTHER cell should become readonly (i.e. should not allow input). Is it possible to make ALL the form elements in one <td> cell as readonly? Further, is it possible to change their background colors to say light grey? Then, when you select another radio option, that cell becomes writable and the other cell becomes readonly. Thanks a lot! Similar TutorialsI'm trying to declare different charactoristics for different inputs (i.e. submit, checkbox, radio). I have this code, however, I can't seem to get the checkbox background color to go away. I want to declare the background color of the submit and button fields white, but have the checkbox be whatever color the page is. Code: input,textarea, select { font-family : Verdana; font-size : 12px; background-color : #ffffff; } input.checkbox { border: solid 0px #666666; } Is there a simple way of applying a CSS style to only the form fields that are empty? I searched online and found this but doesn't seem to work. Code: input[value=""] { background-color: #FFFF66; } any other ideas? Okay, so I'm having a little bit of a problem with setting the background color through an onClick event on an option tag. Here is what I mean. Code: <div id = "move"> <form name = form2> <span style="float:left;"> <select name= theDay size=1> <option value=0 selected>Default [themes] <option value=1>White</option> <option value=2 onClick = "red()">Light Blue</option> <option value=3>Aqua <option value=4 value = "document.body.style.backgroundColor= '#98AFC7';">Lighter Blue</option> <option value=5 onClick = "document.body.style.backgroundColor= 'white';">Saturday</option> <option value=6 onClick = "document.body.style.backgroundColor= 'white';">Sunday</option> </select> When I click one of the options, nothing changes, although I set the body.style.backgroundColor to register to a different color when the option tag is clicked. Any ideas? Hello, Can someone please tell me what I am doing wrong here. I am trying to alter the background of an input using css. It seems to work in IE but not in fierfox. Below is the sample code. Thanks. Code: <head> <style type="text/css"> .container{ width: 610px; height: 300px; border:solid 3px #59813a; } #format1 input{ background-color: purple; width:75px; } </style> </head> <body> <div class="container"> <form id="form" name="form" method="post" action="index.html"> <table> <tr> <td >Last Name</td> <td ><input type="text" name="name" value="enter name" class="size1" /></td> <td>name</td> <td><div id="format1"><input type="text" name="name" id="name" /></div></td> </tr> </table> </form> </div> <!-- container --> Usually I find anything I need to know if I have the source code of a web site but this time I've lost. Some web sites changes the background color of the browsers address (URL) input field (works only with Gecko type browers I think). Just one example: https://www.gmx.net (a commercial email service provider in Germany). How can this be done? Ciao, Meph Is it possible to differentiate between various types of input field, e.g. assign a width to text inputs but leave buttons to find their own width based on content. I know I can do this by assigning certain elements a class but I'd prefer not to have to do this. Thanks I have a form that has background images for the inputs. In both IE 6 and IE 7, the background images will move if the text goes outside of the image. You can see what I'm talking about here. Here is the xhtml: Code: <div class="contact"> <form action="sendmail.php" method="post" id="contactform"> <ul> <li> <label for="name"><img class="label" src="images/name.png" alt="" /></label> <input class="inputbox" type="text" name="name" value="" id="name" /> </li> <li> <label for="email"><img class="label" src="images/email.png" alt="" /></label> <input class="inputbox" type="text" name="email" value="" id="email" /> </li> <li> <label for="tele"><img class="label" src="images/phone.png" alt="" /></label> <input class="inputbox" type="text" name="tele" value="" id="tele" /> </li> <li class="special"> <label for="last">Don't fill this in:</label> <input type="text" name="last" value="" id="last" /> </li> <li> <label for="message"><img class="label" src="images/message.png" alt="" /></label> <textarea rows="5" cols="30" name="message" class="messagebox"></textarea> </li> <li class="submitbutton"> <input type="submit" value="" class="formbutton" /> </li> </ul> </form> </div> and here is the relevant css: Code: .inputbox { height: 39px; width: 246px; border: none; padding: 10px 10px 0 10px; background: url("../images/inputbox.png") no-repeat 0 0; font: bold italic 1.25em/1.1em Lucida, sans; color: #3d2d06; } I'm sure this is an easy one but I can't really figure it out and googling has not produced any results. Thanks in advance. hi, iam having a div tag in that div i have table.. <div style="width:658;height:265px; overflow:auto;" > <table> </table> </div> now i need to change the color of scroll bar of this div tag. i tried with this the css .myScrollBar { scrollbar-face-color: #FF0000; scrollbar-shadow-color: #0000FF; scrollbar-highlight-color: #00FF00; scrollbar-3dlight-color: #FF00FF; scrollbar-darkshadow-color: #00FFFF; scrollbar-track-color: #FFFF00; scrollbar-arrow-color: #000000;} <div style="width:658;height:265px; overflow:auto;" id='myScrollBar'> but its not working.. Regards, Ok I simply cannot figure this one out. All I'm trying to do is change the font color so that the text like "Choose a Username" is not black but white. Here is the link to the page http://www.technicalhypnotherapy.com/wordpress/?page_id=128 This is my CSS. I think the more relevant tags are the last ones. Code: /* Theme Name: Pixel Theme URI: http://85ideas.com/public-releases/wordpress-theme-pixel/ Description: Dark WP theme with 2-3 column layout, dropdown categories menu, multiple widget-ready placement and Feedburner email form integrated, easy to customize. Enjoy! Author: Sam @ 85ideas.com Author URI: http://85ideas.com/ Version: 2.0.2 Tags: black, blue, three-columns, two-columns, threaded-comments, fixed-width, theme-options, right-sidebar, sticky-post . Released under <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a>. . */ /* Defaults */ * { margin: 0; padding: 0; } :focus { outline:0; } h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 10px 0; } h1, h2, h3, h4, h5, h6 { font-family: Verdana; } hr { color: #333; border: 1px solid #121212; } pre { height: auto; overflow-x:scroll; } fieldset { margin: 0; padding: 0; border: 0; } dd { padding-left: 15px; } p { font-size: 9pt; } a { color: #6598b8; text-decoration: none; } a:hover { color: #222; text-decoration: underline; } a img { border: none; } blockquote { background: #070707; border: 1px solid #060606; padding: 5px 15px; margin: 10px 10px 5px 15px; font-style: italic; color: #fff; } code { color: #3366cc; font-style: italic; } strong { font-size: 110%; } body { text-align: center; margin: 0; padding: 0 0 15px 0; font-family: trebuchet ms, arial, helvetica, sans-serif; background: #000 url(images/bgbody.jpg) top center no-repeat; color: #eee; } /* Header and wrapper */ #wrapper { margin: 0 auto; width: 960px; text-align: left; padding: 0; } #header { padding: 0; margin: 0; height: 80px; text-shadow: 0 0 4px #555; } #header #topright { text-align: right; float: right; width: 930px; margin: 3px 0 0 0; } #header #topright ul { list-style: none; padding: 0; margin: 0; } #header #topright li { display: inline; } #header #topright li a { color: #fff; font-size: 9pt; padding: 0 0 0 25px; text-transform: lowercase; } #header #topright li a:hover { color: #ccc; text-decoration: none; } #header #logo { margin: 0; padding: 0; } #header h1 { padding: 0; margin: 0; } #header h1 a { color: #fff; font-size: 17pt; text-decoration: none; } #header h1 a:hover { color: #eee; text-decoration: none; } #header span { padding: 0; color: #eee; font-size: 10pt; } /* Menu */ #catnav { margin: 20px 0 0 0; padding: 0; clear: both; height: 44px; width: 960px; } #nav { list-style: none; margin: 0; padding: 0; } #nav ul { margin: 0; padding: 0; } #nav li { float: left; margin: 0; padding: 0; } #nav a { display: block; line-height: 44px; margin: 0; padding: 0 20px 0 15px; font-size: 10pt; color: #fff; letter-spacing: -1px; } #nav li a:hover { color: #6598b8; text-decoration: none; display: block; } #nav li ul { list-style: none; position: absolute; width: 150px; left: -999em; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } #nav li li { float: left; margin: 0; padding: 0; width: 150px; } #nav li li a { width: 150px; height: 24px; line-height: 24px; color: #fff; border-top: 1px solid #131f27; background: #040404; margin: 0; padding: 5px 20px 5px 15px; } #nav li li a:hover { border-top: 1px solid #131f27; background: #000; padding: 5px 20px 5px 15px; } #nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */ position: static; } #toprss { float: right; margin: 10px 15px 0 0; display: inline; width: 65px; line-height: 41px; } /* Top Content */ #main { margin: 5px 15px 0 15px; clear: both; width: 930px; padding-bottom: 5px; } #contentwrapper { float:left; width: 560px; margin: 0 0 15px 0; padding: 0; } #contentwrapper2 { float:left; width: 900px; margin: 0 0 15px 0; padding: 0; } #contentwrapper .pageTitle, #contentwrapper2 .pageTitle { margin: 15px 0 10px 0; font-size: 14pt; letter-spacing: -1px; color: #fff; font-weight: normal; background: url(images/bg-trans.png) repeat; padding: 5px; } .topPost { margin: 0; padding: 0; font-size: 9pt; } .topPost h2.topTitle a { font-size: 15pt; font-weight: normal; color: #fff; letter-spacing: -2px; } .topPost h2.topTitle a:hover { text-decoration: none; color: #abd1ea; } .topPost p.topMeta { padding: 0; margin: -10px 0 0 0; font-size: 9pt; color: #cdcdcd; } .topPost p.topMeta a { text-decoration: none; color: #fff; } .topPost p.topMeta a:hover { color: #ccc; text-decoration: underline; } .topPost div.topContent { font-size: 9pt; color: #efefef; margin: 8px 0; } .topPost div.topContent p { font-size: 1.05em; line-height: 1.6em; } .topPost div.topContent a { text-decoration: underline; color: #fff; } .topPost div.topContent a:hover { text-decoration: underline; color: #ff9933; } .topPost div.topContent ul, .topPost div.topContent ol { padding: 0 0 0 30px; } .topPost div.topContent ul li, .topPost div.topContent ol li { font-size: 1.05em; color: #eee; } .topPost span.topComments, .topPost span.topMore, .topPost span.topTags { font-size: 9pt; font-style: italic; background: url(images/bg-trans.png) repeat; padding: 8px 10px; margin-right: 5px; line-height: 27pt; color: #fff; border: 1px solid #111; } .topPost span.linkpages { font-size: 9pt; font-style: italic; color: #fff; margin-bottom: 10px; display:block; } .topPost span.linkpages a:hover { color: #ddd; } .topPost span.topComments:hover, .topPost span.topMo hover, .topPost span.topTags:hover { background: #040404; } .topPost span.topComments a { color: #fff; background: url(images/comments.gif) left no-repeat; padding-left: 20px; line-height: 27pt; vertical-align: middle; } .topPost span.topMore a { color: #fff; background: url(images/more.gif) left no-repeat; padding-left: 20px; line-height: 27pt; vertical-align: middle; } .topPost span.topTags em { background: url(images/tags.gif) left no-repeat; padding-left: 20px; line-height: 27pt; vertical-align: middle; color: #0a0a0a; } .topPost span.topTags a { color: #fff; line-height: 27pt; vertical-align: middle; } .topPost span.topComments a:hover, .topPost span.topMore a:hover, .topPost span.topTags a:hover { color: #fff; text-decoration: underline; } #nextprevious { margin: 10px 0 5px 0; } #nextprevious a { color: #eee; text-transform: lowercase; border: 1px solid #111; padding: 5px 8px; font-size: 10pt; line-height: 1.4em; } #nextprevious a:hover { color: #fff; } /* Comments */ #comments { margin-bottom: 10px; margin-top: 15px; background: #040404; width: 530px; /* fixes bug in IE7 where putting focus on the text makes it disappear behind the background. yeah, weird. they call it a dimensional bug. */ border: 1px solid #090909; padding: 0px 15px 10px 15px; color: #fff; } #comments h3 { font-size: 10pt; font-weight: normal; color: #fff; margin: 15px 0; padding: 0; } #comments p a { color: #6598b8; } #comments p a:hover { color: #fff; } #comments p { padding:0; margin: 7px 0; } ul.commentlist, ul.trackback { list-style-type: none; margin: 10px 0; font-size: 9pt; } .commentlist li, .trackback li { margin: 10px 0 15px 0; padding: 10px; background: #080808; border: 1px solid #040404; list-style-type: none; } .commentlist li.alt { background: #000; border: 1px solid #020202; border: none; margin-top:10px; } .commentlist li.cleared { background: transparent; border: none; } .commentlist a:hover { color: #eee; } .commentlist a.gravatar { float: left; margin: 0 15px 10px 0; width: 60px; } .commentlist .commentbody { margin: 0; padding: 0; } .commentlist .commentbody p a { text-decoration: underline; } .commentlist cite { font-size: 10pt; font-style: normal; color: #ddd; } .commentlist small.commentmetadata a { color: #666; } .commentlist p { color: #dedede; } #respond { clear: both; margin-top: 15px; } textarea#comment { width: 450px; background: #fff; color: #111; padding: 10px; } #comments #submit { margin: 0; } #extrastuff a {color:#999; font-size:0.8em;} #extrastuff a:hover {color:#6598b8; text-decoration:none;} #extrastuff #rssleft {float:left; width:250px;} #extrastuff #trackright {float:right; width:180px; text-align:right;} /* Welcome section */ #main #welcome { margin: 0 0 20px 0; padding: 0 0 5px 0; background: url(images/bg-trans.png) repeat; } #main #welcome h2 { font-size: 14pt; font-weight: normal; color: #fff; letter-spacing: -2px; margin: 0 10px; padding: 10px 0 3px 0; } #main #welcome p { font-size: 9pt; color: #eee; margin: 0 10px; padding: 6px 0; } #main #welcome a { text-decoration: underline; color: #ff9933; } #main #welcome a:hover { color: #6598b8; } #main #welcome form { margin: -5px 0 0 0; background: transparent; /* required for IE */ } #main #welcome #feedbox { border: 1px solid #ccc; padding: 2px 1px; width: 180px; } .submitbutton { margin: -5px 0 0 5px; background: #010101; color: #fff; font-size: 8pt; padding: 3px 6px; vertical-align: middle; border: 1px solid #111; } .submitbutton:hover { cursor: pointer; background: #050505; } /* Sidebars */ #sidebars { margin: 15px 0 0 0; float: right; width: 340px; color: #eee; } #sidebars .sidebarbox { background: url(images/bg-trans.png) repeat; padding: 8px 15px; } #sidebar_full { padding: 0; margin: 0; } #sidebar_left { float: left; width: 160px; } #sidebar_right { float: right; width: 160px; } #sidebars h2 { margin: 0; padding: 0 0 8px 0; font-weight: normal; font-size: 11pt; color: #fff; letter-spacing: -1px; } #sidebars table { width: 130px; } #sidebars ul { margin: 0; padding: 0 0 5px 0; } #sidebars li { margin-bottom: 20px; list-style: none; font-size: 9pt; } #sidebars li ul { padding: 0; } #sidebars ul ul li { margin: 0; padding: 2px 2px 2px 16px; color: #eee; background: url(images/bullet.gif) left 8px no-repeat; line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */ } #sidebars a { display: inline; color: #eee; } #sidebars a:hover { color: #6598b8; text-decoration: underline; } #sidebars p { padding: 2px 0; font-size: 9pt; color: #eee; } #tag_cloud a { display: inline; } #sidebars ul.children li {border-bottom:none;} #sidebars ul.children {margin-bottom:0;} /* Before footer */ #morefoot { background: #000 url(images/bggrad.jpg) top left repeat-x; border: 1px solid #070707; padding: 15px; color: #dfdfdf; margin: 0 0 10px 0; } #morefoot p { margin: 5px 0; padding: 5px 0; } #morefoot ul { list-style-type: none; margin-top: 5px; } #morefoot ul li, #morefoot p { font-size: 9pt; } #morefoot a { text-decoration: underline; color: #ddd; } #morefoot a:hover { text-decoration: underline; color: #6598b8; } #morefoot h3 { font-size: 12pt; font-weight: normal; color: #dfdfdf; letter-spacing: -1px; border-bottom: 1px dotted #444; margin: 0; padding: 0 0 2px 0; } #morefoot #searchbox { padding: 1px; width: 180px; } #morefoot .col1 { float: left; width: 340px; } #morefoot .col2 { margin: 0 25px; } #morefoot .col2, #morefoot .col3 { float: left; width: 260px; } #morefoot li { padding-left: 20px; margin-bottom: 5px; background: url(images/more.gif) left 2px no-repeat; line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */ } /* footer*/ #footer { clear: both; background: #000; border: 1px solid #070707; padding: 15px 15px 10px 15px; } #footer p { font-size: 9pt; color: #bbb; padding: 0; } #footer a { color: #bbb; text-decoration:none; } #footer a:hover { color: #fff; } #footerleft { float: left; width: 500px; } #footerright { float: right; width: 300px; text-align: right; } /* Misc */ .highlight { color: #222; font-weight: bold; } .cleared { margin: 0; padding: 0; clear: both; } .alignleft { float: left; margin: 10px 15px 5px 0; } .alignright { float: right; margin: 10px 0 5px 15px; } .aligncenter, div.aligncenter { margin: 10px auto; text-align: center; display: block; } img.alignleft { float: left; margin: 10px 15px 5px 0; } img.alignright { float: right; margin: 10px 0 5px 15px; } img.aligncenter { margin: 10px auto; text-align: center; display: block; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; color: #111; } #reg-form .formleft { background: none !important; color: #fff;} #account-form { background: none !important; color: #fff;} Greetings I hope the title wasn't too confusing. If not this is sure to be. What I have is and Unordered List that has a heading in each List Item and then a few items under that. The List Items are links arranged in a grid that have a hover effect on mouseover. Due to the colors I want the heading (in this case h2) in each li to change color on the a:hover (the hover over anywhere on each li, not just over the h2 text). How can I achieve this? Here is some code to (hopefully) clarify: Code: #lower { width: 765px; float: left; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; } #lower ul { width: 775px; list-style-type: none; margin: 0; padding: 0px; } #lower ul li { font-family: "Trebuchet MS"; font-size: 14px; width: 250px; float: left; } #lower ul li a { text-decoration: none; display: block; height: 125px; color: #262626; } #lower ul li a:hover { background-color: #5B8C3E; color: #D9D9D9; } #lower h2 { font-family: "Trebuchet MS"; font-size: 16px; margin: 0px; color: #262626; } #lower a h2:hover { color: #D9CE3F; } As is the h2 only changes when it is directly hovered, not the the li. Thanks in advance for your help. I'm not sure if this belongs in the javascript or Css forum. because it uses both. But my problem is that on mouseover my background color changes to what I want, but the font-color is not changing. Here is a snippet of my code: Code: <tr class="clickableTROpt1" onmouseover="this.className='cellover'" onmouseout="this.className='clickableTROpt1'" onClick='location.href="searchResults.php?id=2"'> <td><a href="#">Some data cells</a></td> </tr> my css file looks like this: Code: .clickableTROpt1{ font-weight: bold; cursor: pointer; background-color: #FFFFFF; } .cellover{ color: #FFFFFF; background-color: #CCCCCC; font-weight: bold; } it looks like my css needs to be told to apply the changes to <a> tags as well? How can I use CSS to specify the color I want for the image borders on the page? Is there a way to tell the browser not to change the color of a visited link? I have an anchor around some text, but I don't know the color setting of the text. When I visit the link, I just want the text to retain its color based on the other CSS declarations in effect for the text. So, is there a way to specify a:visited { color: do-not-change; }? Hi, How to change the background color of textbox in css, so that negative numbers can be shown in red color I have multiple textbox in my asp page, which gets values from database. So there is a negative value shown, I want to highlight that in red color. How to achieve this? Thank you When using Safari, whenever you click inside an input field, a highlight goes around the field (focus ring). Is there anyway to use CSS to remove the focus ring altogether? hey, i have a question regarding css on my website: http://poolghost.com/ my css file is located at http://poolghost.com/base.css basically what i am trying to accomplish is having a:hover's color change to a different color on the right side of the layout. and i would like links on the right side to be underlined. please advise.. thanks, --avery hi all ! I want to know how I can change the text size and color for a button created inside my page (only for the button the rest should remain the same). The data and button are created in PHP so it looks something like: Code: <div class="column3"> <div class="padding"> <?php if( $this->countModules('right') ): ?> <jdoc:include type="modules" name="right" style="xhtml" /> <?php endif; ?> </div> And css for that part of the page is: Code: #index .box .column3 {width:252px;} I have a php application that requires the applicant to input information on their spouse. If they claim to be single the fields for spouse dissapear using javascript to make a <div> surrounding the fields "hide". This leaves a blank gap on the applicaton where the fields use to display. How would I go about moving the questions below it on top of the hidden spouse fields? here is the current javascript I am using to accomomplish this. It uses a php loop to display the questions for X amount of owners. Code: <? echo "<script language=javascript type='text/javascript'>"; for($i=1; $i <= $_SESSION['principal']['numOwners']; $i++) { echo " function hidediv".$i."() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideShow".$i."').style.visibility = 'hidden'; } else { if (document.layers) { // Netscape 4 document.hideShow".$i.".visibility = 'hidden'; } else { // IE 4 document.all.hideShow".$i.".style.visibility = 'hidden'; } } } function showdiv".$i."() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideShow".$i."').style.visibility = 'visible'; } else { if (document.layers) { // Netscape 4 document.hideShow".$i.".visibility = 'visible'; } else { // IE 4 document.all.hideShow".$i.".style.visibility = 'visible'; } } } "; } echo "</script>"; I am having a heck of a time dealing with IE7 and how it handles z-index tags on SELECT elements and DIV's. This problem only exists in IE7 and does not manifest in IE6, Firefox (Mac/Win) or Safari (Mac/Win). I've posted a concise example of my problem on one of my servers to better illustrate my problem: Sample Problem Page. Check it out using IE6 and then using IE7. Or if you don't have IE6, I've posted a screenshot of what it looks like. I would appreciate any help solving this problem for IE7. Feel free to copy the source code and play with it and even keep the combo-box drop down code for your own use (if you help me get it working of course, ha ha). 1) I want to change the margin around the textfield, right now it looks like a 2px border but i want to change it to 1 or 0 as I will use my css of the parent div to space the items. Is this possible? if so how? Thanks there is a picture attached, as you can see it has a margin, i highlighted it, otherwise it would be snug with the bright green border ps: borders are only there to see the sections 2) Can i change what the <br> tag does? can I make my own class? I would like to make a <br class"mybr"> that would have a 10px space, or something like that. Is this possible? |