|
CSS - Text Field Style
Can anyone tell me how to make a form text field one solid color? No border or anything, just a rectangle box any color.
Thanks! Similar Tutorialscan someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! Hi, Is it possible to style text on the same line like so.... T est Regards Chad I have this for my td tag: Code: <td bgcolor="#ffffff" onclick="window.location.href='...'"
onmouseover="this.style.backgroundColor='#f1ffff';
this.style.cursor='pointer';"
onmouseout="this.style.backgroundColor='#ffffff'">
I'd also like to add code to change the text color onmouseover. Can someone post how. Also, why is it different code to change a style when the code is embedded in an event as opposed to an external css file. For example to the change the background color of a <td> from a css file, it would be background-color, but internally its backgroundColor. This seems very conter-intuitive. Where can I find the available style options for the internal style. The W3C site only has for external and <style> tags in the header.Thanks! Hey, I'm having a problem changing the background of a text input field to white. The problem seems to go away when I remove the javascript...I know next to nothing about javascript. Any ideas? Code: <label for="email"> <input size=30 id="email" name="iemailaddress" value="Enter your email address here" onFocus="functionEmpty(this.form)" onBlur="emptyFill(this.form)" onKeypress="subEnable(this.form)"> </label> Code: input {background-color:white;}
I'm having a problem getting the text in my nav bar to be formatted with my CSS sheet. ***HTML*** <div id="navbar"> <ul id="nav"> <li class="current_page_item"><a href="">Home</a></li> <li><a href="">Features</a></li> <li><a href="">Purchase</a></li> <li><a href="">Theme Demo</a></li> <li><a href="">Blog</a></li> <li><a href="">Affiliates</a></li> <li><a href="">Support</a></li> <li><a href="">Contact Us</a></li> </ul> </div> ***CSS*** #navbar { width: 960px; height: 47px; do not change Code: Original - do not change Code font-size: 12px; font-family: Tahoma, Geneva, sans-serif; color: #FFF; font-weight: bold; font-size: 12px; font-family: Tahoma, Geneva, sans-serif; color: #FFF; font-weight: bold; margin: 0px auto 0px; padding: 0px; } The text values aren't able to change for some reason, but the width and height values, padding, etc are. If someone could please help me trouble shoot that would be great. Thank you Paul I have a disabled input field that is managed by PHP scripts. I need the fields to appear to the user but to look like just text. The main problem is that I have a patterned background on the page and I don't know how to create the style so that there is a transparent background on the input field. Can someone help? TIA. Hi there, How do I make the background of a text field change color upon hover/rollover? Any help would be great! Hi, I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the index page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour. I also want the whole title to be on one line. I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other! My page code: <div id="garden-designer-title"><a href="(*website address*)" title="home">Joe Blogs</a><h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1> </div> My stylesheet code: #garden-designer-title { position:relative; left:0px; top:0px; padding: 0; margin: 0; width:526px; height:51px; z-index:7; } #garden-designer-title a { position:relative; font-size: 46px; font-family: verdana, arial, helvetica, sans-serif; color: #009999; font-weight: normal; text-decoration: none; } #garden-designer-title h1 a { display: inline; font-size: 29px; font-family: verdana, arial, helvetica, sans-serif; color: #9482A4; font-weight: normal; text-decoration: none; } Does anyone know what I'm doing wrong?! Many thanks! I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) Hey, wondering if any of you could help me with regards to syntax needed in CSS (im guessing) to make text fields in a form taller and wider? Thanks,Sean I would like to do automatic resizing textfield depending of resize browser. I know one solution with css style code. for example :<input type="text" style="position:absolute;width:50%">, but it don't accommodate me. Please, exist other solution for this problem? Hey, all. Just wondering if anyone knows of a proper way to get rid of vertical space between text fields in a form. IE seems to like to have 2px in there, where other browsers will give me the desired 0px. For example:
Code: <input type='text' value='test' style='margin:0px; display:block;'> <input type='text' value='bottom' style='margin:0px; display:block;'> Gives me 2px of space between the 2 fields, but only in Internet Explorer.. Any thoughts? I have an alignment issue that is driving me crazy. For whatever reason, the text that I have in a <span> field is dropping too far down for the last line. Here is a screenshot of the relevant text: Yada yada For whatever reason I can't keep the final "Yada" from dropping farther down. It is in the following <td> field: Code: <td style="height: 200px; width: 150px; vertical-align: top; padding-top: 10px"> And the class for the span has the following characteristics: Code: .announcement_body
{
color: black;
font-size: x-small;
}
I can't see what would cause this. I've already tried adjusting the height of the <td> field without any luck. I did get consistent spacing when I added the characteristics "vertical-align: middle", but that made the distance between every line too large. Any idea what I'm missing here? Stephen I'm going round and round without getting any head way so hopefully someone can give me a hand... I'm creating a mail form using a background image for the input fields. What I don't want is a border. If I don't add a border: solid black, for instance, I get a default white. Is there a way to have no border? Code: INPUT.email {
background-image: url(images/bg_email.jpg);
width:206px;
height:21px;
font-family: Verdana, sans-serif;
font-size: 14px;
color: #ffffff;
border: 1px solid black;
margin: 0 0 0 10px;
padding: 0 0 0 6px;
}
Thanks in advance! I'm missing something here. I want to change the color of the default value for this text field, without changing the overall color of the input field. For example, the default value of 170 will be gray, but when a user overwrites the data with their own numerical value, it will be black. I know how to change the color of the input field when a user types in data, but is there a way to change the color of the value= ? <input type="text" name="trans1_1" size="6" value="170"/> Any ideas? Seems like a simple task, but can't figure it out. Thanks in advance for the time. Hi all, I've got an div set up for images, which just has a style of padding-right 15px; . Now, I've got a text div with a style of padding-right 5px; . Whenever I put that div in after the image div, the text appears below the image. Can anyone tell me how to make it so the text appears next to the image (on the right)? Cheers. I am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated. I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 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 did a web page for a company and it looks fine in ie7 where I tested it. The problem is when viewed in IE6 its like it ignores the sizes I put in. The box appears too big in IE6 and is the propr size in IE7. Is there any way to fix it so it would look the same in IE6 as IE7? |
|||||||