CSS - Styling Form Input Fields

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'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;
}

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).

I'm reading around, wondering how I get form fields to change style and the text that is inserted in the form fields to change style (font/size)..

Is there an easy way to do this?

for example

http://member.classifieds.com/userjoin.php

the entry boxes are smaller, and the text is smaller.. I looked at their code and I'm not quite sure how they achieved this.

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!

Im having trouble with styling a web form, im trying to manipulate the textarea width and have the following CSS code

textarea {

width: 400px;
height: 250px;
margin-top: 5px;
margin-bottom: 5px;
padding: 0;

}

The width is fine in Internet Explorer yet in Opera it seems to completely ignore the width attribute.

The form itself is in a <div> which has no width attribute.

Anyone got any ideas?

Is it possible to style form elements (specifically checkboxes) with pure CSS, and without JS?

I'm thinking of something similar to this (but without the JS):

http://ryanfait.com/resources/custo...-radio-buttons/

I have this code that works fine in firefox and MSIE and the whole page validates with tidy (Green checkmark). I can't post a URL because its on a private server.

The part that isn't quite right on safari is these: I have a table load of these that are part of a big form named commit.

<td width="30" bgcolor ="#e7e7e7"><input type ='submit' class='button_notdone' value='2'
onclick="javascript:mapbutt(document.commit,2)" /></td>

This is the javascript code for mapbutt

function mapbutt(myform,dex) {
myform.action.value='map';
myform.qnum.value=dex;
}

The javascript does not return false so after clicking and setting the action and qnum values it is supposed to fall through to the form's serverside action, which it does. The problem is the styling of the submits. On every other browser they are whatever color I specify in the style I assign to them.

Here is the style for button_notdone

.button_notdone {
font-family: monospace;
font-weight: bold;
width: 28px;
height: 22px;
color:#ffffff;
background:#000000;
}

The background color in this case is supposed to be black and the text color is supposed to be white, and on safari it is black text on grey.
I tried changing "input" to "button" which does indeed display the background color but unlike a submit it does not display the value. I need the text of the value to show in the text color over the button or submit or whatever it ends up being.
How can I get these submits to look like what I want on safari.
Thank you.

I have form located below the google map on this page -

http://www.hometowntrans.com/map_hours.asp

I want to style it such that it has a 3d look to it if you will, with a gray background and black text.

Im trying to get an input field and form button to line up to the right of an <li> tagged menu and not sure of the approach i should take.

I'd prefer not to use a table if possible, and the table im using now is a bit buggy anyway.

this is a page with the menu as it shows right now....
http://www.seesawusa.com/products/

this is the page with the basic idea of what im trying to do
http://www.seesawusa.com/pages/74/

Things i'v tried
1. put the form inside a LI tag.... This results in putting the search box below the list of menu items across all my test browsers.

2. put the UL and the FORM inside a table with 2 cells...
in FF, i get the result i want... except the LI and INPUT field are not aligned to the right
in IE6 & 7 I get it lined up the way i want it. But the table pushes the the height and width of the containing div to an unacceptable level

I've seen this type of thing before and in my searching other sites i've only found complicated table based layouts that use it. Does anyone know an approach that would allow me to leave out tables, or at the very least only use one?

Thanks for the glance.

P.S. Interestingly enough, the page you are reading has a menu and text field configuration that im wanting to use, but it is very table oriented.

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 guys,
sorry if its newbie question, don't work with CSS so long. I've just read a nice article about styling CSS forms (Fancy Form Design) and it looked really nice, so I tried to apply it immediately. However, some problems occured, things are never so easy I guess .
First problems occurs with styling of group of form elements: they are dropped one line down (below its label, resp. legend) in IE 5.5/6.0 and also moved to the right (in IE 5.5-7.0) for some reason. Also, styling of fieldsets' legends works odd: first legend is styled differently than the others (one would guess that all of them will be styled in same way).
Could you give me pls a little hint on these problems?

Here's the test page with applied form styling: http://147.32.122.251/hsh2t/index.php.
General CSS: http://147.32.122.251/hsh2t/forms.css
IE (5.5-6.0) only CSS: http://147.32.122.251/hsh2t/forms-ie.css

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

Hi, 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.

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