CSS - Web Form Styling Issue

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

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.

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/

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

How do you keep a dropdown box on top of all other windows?

I'm working on this CSS test page and I am encountering some problems that I hope someone might know how to fix. The state and zip are supposed to be on the same line as the city, and the date and phone # are supposed on be on the same line as each other. Anyone know what I am doing wrong?

webtrain.austin.cc.edu/
~lbrown/circulontestnew.html

Also, in IE the last name box drops off the top.

Please let me know if you can help.

Thanks!

I have added a captcha code to a test form on my site which looks and works fine in ie. But in firefox you can't see it.

I am sure it is something simple but I just can't figure it out.

The form which can be viewed is www cristalclear.co.uk / contactus.php
(not allowed urls yet hence above)

Any help would be most appreciated.

Website you can check:
http://www.refinethetaste.com/html/default.asp?Section=myaccount&SubSection=signup

<h2>Login Information</h2> backhground does not extend fully when website opened with internet explorer. any help appreciated.


Code:

<style>
/*sign up*/
#signup	{ width:576px; float:left; margin-left:2px; }
#signup .signup	{ float: left; width: 576px;}
#signup h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#signup h2	{ height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#signup .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label {  display: block;  float: left;  width: 120px;  padding: 5px; margin: 0 0 10px 0;  text-align: left;}
#signup form div.required label, label.required {  font-weight: bold; }
</style>
	<div id="signup">
    	<div class="signup">
            <h1>Create a New Account</h1>
            <div class="hline"></div>
            To take full advantage of your Williams-Sonoma account, please provide all the information below.
            <form action="?Section=myaccount&SubSection=signup&Process=add2member" method="post">
                <p><strong>Bold</strong> fields are required.</p>
                <fieldset>
                <h2>Personal Information</h2>
                <div class="required">
                    <label for="FirstName">First Name</label>
                    <input type="text" name="FirstName" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="required">
                    <label for="LastName">Last Name</label>
                    <input type="text" name="LastName" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="optional">
                    <label for="CompanyName">Company Name</label>
                    <input type="text" name="CompanyName" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="required">
                    <label for="phone">Phone</label>
                    <input type="text" name="Phone" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="optional">
                    <label for="newsletter"><input name="newsletter" type="checkbox" value="1" checked="checked" /></label>
                    Yes, I would like to be notified of news and happenings at RTT via this email address. 
                </div>
                <h2>Login  Information</h2>
                <div class="required">
                        <label for="email">Email</label>
                        <input type="text" name="Email" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="required">
                        <label for="Password">Password</label>
                        <input type="password" name="password" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="required">
                        <label for="Confirm Password">Confirm Password</label>
                        <input type="password" name="passwordc" value="" />
                </div>           
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="required">
                    <label for="submit"></label>
                    <input type="hidden" name="xp" value="xp"> 
                    <input type="image" name="Create Account"  src="<%=WebsiteURL%><%=THEMES%>/images/btn_createaccount.gif" />
                </div>
                </fieldset>                
        	</form>
		</div>
    </div>

I have a very curious problem with the formatting of input fields in html forms which has me completely stumped.

Basically, input fields are not looking as they should (and in particular, not showing any text typed inside them) in any versions of IE (well, 6, 7 and 8 anyway) - tested on various machines so not a Windows installation issue. Despite my setting a class for them I cannot get them to look like proper inputs, nor can I make the inputted text visible. I can see the cursor for the text when I click inside where the input should be, but it looks far too small- about 4 px as far as I can tell. (???)

Interestingly in Firefox the text inputted IS visible, although the border of the inputs doesn't show.

I've set a class for input:

input {border:1px #000; color:#000;}

I also tried setting this explicitly for inside the div holding a form where the input appears:

.searchform input {border:1px #000; color:#000;}

Neither of which work.

Here's one of the forms where I'm trying to include the input (hashes at the moment for links as it's in development):

<form action="#" method="POST" name="searchform">
<img src="/images/freecallback.gif" alt="Free Call Back">&nbsp;&nbsp;&nbsp;<a href="#" title="Member Login"><img src="/images/memberlogin.gif" alt="Member Login"></a>
<input type="text" name="searchtext" value="" size="8" />
<input type="image" src="/images/searchbutton.gif" name="searchform" />
</form>

And here's another form (same result though interestingly the SELECT appears ok):

<form action="#" name="bookahotel" method="post">
<label>Arrival</label>
<input name="date" size="6" type="text" />
<p class="text_normalblack">Arriving Today</p>
<input name="country" size="6" value="Country" type="text" />
<input name="towncity" size="6" value="Town/City" type="text" />
<select name="_EnquiryType" size="1" class="forminputs" />
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
<input name="bookahotel_search" size="6" value="" type="image" src="/images/bookahotel_search.gif" />
</form>

Any ideas???

Thanks

After i set the height of the text box, when viewing it in firefox, not only does it look like the font size is over 100 before typing the norm-sized text, but it starts in the middel-left of the box instead of the top left what do i do to correct this?

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >


<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>




<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>


<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>


<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}



/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}


Any help would be greatly appreciated.

Regards

Jay

I have a menu constructed <div><ul><li><a><img><p>.

The li is margined as 16% to space a given number of links across the page in the 100% div.

I am trying to put a border around the <a> but the browser only shows the border as a sort of collapsed div and does not surround the child elements. I try giving height to the <a> but that does not work.

Any ideas how I can get the <a> border to surround the <img><p> tags?