|
CSS - Highlighting Form Fields When Focused
is this possible with CSS?
So when the carat is focused on a form field the field is highlighed maybe by changing the border color... or background color. very much like the macromedia support site. http://www.macromedia.com/support/ I have a feeling though... it might involve a bit of javascript? Cheers in advance Rob Similar TutorialsHi, I'm having difficult with learning forms and how to style them. I've gotten mostly what I am looking for just now I don't seem to be able to make adjustments: Adjusting the size of the text-window, wrapping the frame boarder around the fieldset. Those are my main issues, any help would be greatly appreciated. Hy- A pretty simple(?) question (I guess) Is there a way to format the look of radio buttons and checkboxes with css? e.g. to make it "fit" with this textfield style: style="font-size: 11px; font-family: Verdana; border-width: 1px; border-color: black;" regards Sheriff I've seen some text inputs with pretty snazzy styling, such as borders with rounded corners. How is this done? is there a way to disable the 3d shadowing effect on form fields? so i can just have a border. to start: this is my first post and i hope this forum is as helpful as the others i am a member of.. i have a basic text game i am working on and code is already layed out for me.. but i am looking to give the game my own style.. i have created the look i want in photoshop and sliced and sent over to dreamweaver but i am a noob and dont know how to get the things functioning.. at all pretty much everything can be set as the background except for the form but i want the blue gradient in input fields and images as buttons. i would like to have big font size in boxes and also have white letters.. also i want the whole centered x and y when viewer goes to page like i said: im a noob and just getting back into the web dev stuff and am pretty rusty so if anyone can help me out i will be SOOOOOO thankful!!! here is the link to the jpg.. let me know if you need the psd but i have 2 or 3 dif fonts in it that are not common fonts Code: http://i951.photobucket.com/albums/ad353/zac_exuro/Untitled-1-2.jpg Hi, I'm creating a form and for some reason I can't get rid of the space between each line of the fields. I've tried making the margin and padding 0 but no joy. Is it me or just browser bugs? Help appreciated PHP Addict Code: <div style="width: 350px; float: right;"> <div style="width: 100px; text-align: right; float: left; background: yellow;"> <label for="">field Name:</label> </div> <div style="width: 100px; float: left; background: orange;"> <input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25"> </div> <div style="width: 120px; float: right; background: blue;"> Error Message </div> <br /> <div style="width: 100px; text-align: right; float: left; clear: left; background: yellow;"> <label for="">field Name:</label> </div> <div style="width: 100px; float: left; background: orange;"> <input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25"> </div> <div style="width: 120px; float: right; background: blue;"> Error Message </div> <br /> <div style="width: 100px; text-align: right; float: left; clear: left; background: yellow;"> <label for="">field Name:</label> </div> <div style="width: 100px; float: left; background: orange;"> <input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25"> </div> <div style="width: 120px; float: right; background: blue;"> Error Message </div> </div> I'm stumped. Cannot find a solution here. Is it possible to vertically align a form field inside a DIV in IE6? It works fine everywhere else. (Big shock...) Thank you for any help you can give. I've resolved to using tables temporarily. Ughhh. Here's a snippet of the CSS: Code: body { background-color: #e2e4d7; background-image: url("../images/fade_top.gif"); background-repeat: repeat-x; margin: 0; padding: 0 }
#wrapper { margin: 12px auto; width: 796px }
#top { background-image: url("../images/main_top.gif"); background-repeat: no-repeat; width: 796px; height: 8px; overflow: hidden; vertical-align: bottom }
#main { background-image: url("../images/main_back.gif"); background-repeat: repeat-y; width: 796px; overflow: hidden }
#header { background-image: url("../images/header_back.gif"); background-repeat: no-repeat; width: 796px; height: 262px }
#nav { margin-right: 8px; margin-left: 8px; width: 780px; height: 60px }
#nav ul { list-style-type: none; margin: 0; padding: 0; width: 780px }
#nav li { float: left }
#nav li a { display: block; padding-top: 60px; height: 0; overflow: hidden }
...
#banner { margin-right: 8px; margin-left: 8px; width: 780px; height: 202px; overflow: hidden }
#bannerLeft { background-image: url("../images/banner_logo.gif"); background-repeat: no-repeat; position: relative; width: 316px; height: 202px; float: left }
#searchBox { line-height: 53px; text-align: center; position: absolute; top: 149px; width: 316px; height: 53px }
#searchField { margin: 0; padding: 0; width: 196px; vertical-align: middle }
#searchButton { margin: 0 0 0 6px; padding: 0; vertical-align: middle }
#bannerRight { background-image: url("../images/banner_photo.jpg"); background-repeat: no-repeat; width: 464px; height: 202px; float: right }
...
And here's a snippet of the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title></title> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"/> </head> <body> <div id="wrapper"> <div id="top"></div> <div id="main"> <div id="header"> <div id="nav"> <ul> ... </ul> </div> <div id="banner"> <div id="bannerLeft"> <form action="http://www.google.com/search" method="get"> <input type="hidden" name="ie" value="UTF-8"> <input type="hidden" name="oe" value="UTF-8"> <input type="hidden" name="domains" value="http://www.whmca.com"> <input type="hidden" name="sitesearch" value="http://www.whmca.com"> <div id="searchBox"> <input id="searchField" type="text" name="q"><input id="searchButton" name="btnG" type="image" src="images/search_bt.gif" alt="Search" height="14" width="42"> </div> </form> </div> <div id="bannerRight"></div> </div> </div> <div id="body"> ... </div> </div> <div id="bottom"></div> <div id="copyright"> ... </div> </div> </body> </html> 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 with several input and option fields, can I apply a separate background color to an individual input field possibly by name or id ? Code:
#form1
INPUT, OPTION {
background-color: #999999;
}
Greetings! Maybe it's a newbie question, but I can't find out why form fields don't get vertically centered when rule height: 4em; line-height: 4em; is applied on them, they are inline elements, aren't they? In FF applied correctly, not so in IE. Please take a look at: http://147.32.113.143/biotest/Sourc..._LookUpTerm.php Is it possible to expand a table with DIV's using CSS hidden/visible? If I select an option from a select field in one row, to have a hidden select field appear in the row directly below, moving the contents directly below down a row? Expanding the table when a hidden row becomes visible. Or should I just use DIV's and forget about using the table format? Hi, I am having trouble clearing labels and fields. I have set up my labels to float left and my fields to float left. When i have more than one set of label and field, they do not align underneath each other. Please could someone suggest the best way to clear the label and field so the next row will display correctly? Thanks Hello I work with a lot of online forms, long, multi-page forms like applications and housing forms. We currently style all form fields to use monospaced fonts. Our biggest reason in the past for doing that was for consistency between browsers. Netscape 4.x was the biggest culprit. Our sites now check and kick out 4.x browsers. Some in our group want to stay with monospaced fonts, and some want to switch to allowing proportional fonts. Those in our group who are for monospace say: - It helps to separate (visually) what is the label and what is the question. - They think it looks bad when the question and the answer use the same exact style. - With monspace the size attribute and the maxlength attribute are in sync. They hate it when a text field scrolls just because you type in some upper-case "M" characters. - If you, for instance, use too many lowercase "l"s then your text ends halfway through the field. Those in our group who are for proportional say: - In cross-browser testing the differences in spacing (in page layout) for text, textarea, and select fields is minimal. - The form fields look better. - If you look around online most forms now use proportional fonts; it's accepted. Does anyone here have opinions about monospace vs. proportional fonts in long online forms? I happen to fall into the proportional group, myself, but, as you can see, the argument, "It looks better." is not very technically compelling. Thanks for your opinions. 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? 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! Hey everyone, the admins have implemented a new hack to the forums, allowing you to post your code with nicely coloured text rather than just the normal black or the old php stuff. More details can be found he http://forums.devshed.com/t279108/s.html Html code: [hig hlight=html4strict]your code here[ /highlight] For example: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <h1 class="header_text"> Nice One! </h1> <p id="main_content"> <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>
The same goes for CSS highlighting: [hig hlight=css]your code here[/high light] css Code: Original - css Code /*Comments*/ body { property:value; } body, div { property:value; }
As you can see from the thread I linked, there are many many other languages supported, but these three examples are more likely to be used than any other in this particular forum... Have fun with it, and please do use this feature, I'm sure it will make things much easier for us to read/understand, rather than just posting chunks of code. Enjoy! --Jon. Seems that if class's are applied to individual TD tags, no matter how i try to implement row highlighing, the TD class will overide the highlighting color. A simple way to implement row highlighting is: <TR onmouseover="this.style.backgroundColor='navy';" onmouseout="this.style.backgroundColor='grey';"> however, a TD with a class that set's a DIFFERENT backgroundColor will disregard the TR mouseover. Any help? hi there, i am currently designing a page for a client, where i use menu highlighting (active, hover, focus). the menu is arranged in a list with two sublevels. -> menu top 0 -> level 1 -> link 1 -> link 2 etc... my aim is to let only the currently active menu be in a different color than all the others. what actually happens is that all submenus as well are highlighted. her is the code: Code: #right ul.menu,
#left ul.menu {
margin: 0;
padding: 0 0 0;
list-style: none;
}
#right ul.menu li,
#left ul.menu li {
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
#right ul.menu li a,
#left ul.menu li a {
padding: 4px 0;
display: block;
border-bottom:1px solid #dadada;
text-decoration: none;
outline: none;
color: #666;
}
#right ul.menu li a:hover,
#right ul.menu li a:active,
#right ul.menu li a:focus,
#left ul.menu li a:hover,
#left ul.menu li a:active,
#left ul.menu li a:focus {
color: #FE642E;
border-bottom:1px solid #dadada;
text-decoration: none;
background:#fff;
}
#right ul.menu li.active,
#left ul.menu li.active {
color: #FE642E;
text-decoration: none;
font-weight:normal;
}
#right ul.menu li.active a,
#left ul.menu li.active a {
color: #FE642E !important;
text-decoration: none;
font-weight:normal;
}
#right ul.menu li ul,
#left ul.menu li ul {
margin: 0;
padding: 0;
list-style: none;
}
#right ul.menu li li,
#left ul.menu li li {
padding: 0 0 0 10px !important;
list-style: none;
}
#right ul.menu li li a,
#left ul.menu li li a {
font-size: 92%;
font-weight: normal;
background: url(../images/arrow.png) no-repeat left !important;
padding-left:10px !important;
border-bottom:1px solid #dadada;
color: #666;
}
#right ul.menu li li a:hover,
#right ul.menu li li a:active,
#right ul.menu li li a:focus,
#left ul.menu li li a:hover,
#left ul.menu li li a:active,
#left ul.menu li li a:focus {
color: #FE642E;
}
#right ul.menu li.active a:hover,
#left ul.menu li.active a:hover {
color: #FE642E !important;
text-decoration: none;
font-weight:normal;
border-bottom:1px solid #dadada;
background:#fff;
}
URL i have added a screenshot to visualize the problem, the only link in orange should be 'Menu A'. thank you in advance, sebastian I have created a bit of CSS similar to the way faqs are expanded and contracted by clicking. It constitutes a list of maxims some of which are further expanded and some of which are not. An example of this is displayed here, http://yogaredux.meripol.net/node/12. What I am looking for is some kind of CSS which is content depended. If the answer part is filled I want it to have a different colour from when it is empty. Is there any kind of Javascript, CSS or a combination of the two that can implement it? |
|||||||