CSS - Styling A Form: On Select

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.

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

Please take a look at my css form he
http://www.pearl.ru/isdunyasi/admin/default[1].htm


For some reason row under select boxes dislocated. I couldnt figure out why. Any help appreciated.


Code:

/**************** Form styles ****************/
fieldset	{
	margin:1em 0;
	border:none;
	border-top:1px solid #aaaaaa;
}
legend	{
	color:#aaaaaa;
	background:transparent;
	font-size:14px;
	font-weight:bold;
}
label	{
	float:left;
	width:100px;
	padding:0 10px;
	text-align:right;
}
fieldset div	{
	margin-bottom:.5em;
	padding:0;
	display:block;
}
fieldset div input,fieldset div textarea	{
	width:150px;
	border-top:1px solid #000000;
	border-left:1px solid #000000;
	border-bottom:1px solid #aaaaaa;
	border-right:1px solid #aaaaaa;
	padding:1px;
}
#Submit input	{
	border:1px solid #d7d7d7;
	padding:2px;
	background:#aaaaaa;
	color:#FFFFFF;
	font-weight:bold;
}
fieldset div.Req	{	
	font-weight:bold;
}

Hi. I have a form in a php script where among other fields the visitor picks a color from a select tag.
I can manage the select list with the following code:
<option style={background:red;} value=1>red</option>
<option style={background:yellow;} value=1>yellow</option>
...and so on...
but when I use the select to pick a color the browser highlights my selection using blue color. The problem is that this blue overwrites my color so the visitor can see all the other colors but not the one he is choosing ...
Is there a way to control the highlighting color of the select tag?

Sorry if this has been answered before... i couldn't find an answer...

Hi,

I've got a simple page that includes a total of 15 of these:

Code:

<FORM name="DropdownIndex" style="margin:0">
<SELECT name="URL" width="500" text="black" onChange="if(options[selectedIndex].value) 
window.location.href=(options[selectedIndex].value)">
<OPTION value=""></OPTION>
<OPTION value=""></OPTION>
</SELECT></FORM>

(Each one is inside it's own single-celled table, all of which are nested inside other tables.)

In the document's <head></head> I have
Code:

<style type="text/css">
select {width:500px;color:#00ff00;background-color:#000000;font-size:12pt;font-family:Gill Sans MT,Verdana;}
</style>

which controls all the form-selects on the page.

How do I write things so that I can assign different properties to groups of forms, without having to insert the properties on each and every form-select?

Hope I'm being clear,

Thanks,
Ez

New to this but with due diligence, will learn this......I have built asp update form to allow users to enter new data into the database. They are wanting to change new text entries into blue rather than using the default color (black). This highlights those new entries for those reviewing the data. I have googled for methods ranging from radio buttons to check boxes to define a new font color with no luck so far....any help is greatly appreciated............best case I think, would be a font tool bar added to the form, but have not found that method


thanks

Hi Guys,

Hope you are all well. My page layout is in CSS, however in the middle I have a selection of images and text, based in a standard HTML table.

All the images are 300px wide. It works fine on all nice small browsers, but it doesn't look nice on screens with a high resolution, because the images have lots of ****e space round them, and adjusting the background colour looks just as bad.

I have tried to apply width: 300px; (as well as max-width: 300px; ) to the td element, but neither FF or IE seems to accept this? Should they accept this?

Has anyone got a better more practical layout model for this type of display? either using a fix to the above or 'pure' CSS and ditch the table?

Charlie

I see that layout on my site is completely broken in IE7...
funnyfurniture.net

Could anybody help me to fix my css...

I am styling my <pre> on my template document and have some questions. First, I tend to gravitate to semantic correct CSS and xHTML. Thus chose xHTML strict for my template document and have been extensively styling the CSS style sheet.

The <pre> tag presents the latest dilemma. Basically, I came across this link where the developer presented CODE in a <textarea> tag. The code did not require entities, < or &rt; in the markup. These styling attributes appealed to me; inset design and overflow with scrollbars for extending text beyond the page.

Bottom of the Page
http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/

The developer also used presentational styling in the markup. HTML strict does not allow one to use style attributes in the HMTL; besides the style sheet. But my sensibilities gravitate toward using semantically correct markup. Most people, including myself, use div containers with classes or ID for presentational styling. But for this exercise, the <pre> or <code> tag are preferable since these classes serve to present (you guess it) code.

One annoyance about the <pre> relates to indenting the markup (the actual text file). By default (and by design), <pre> tag incorporates any indents or white space in the browser. My thoughts revolved around changing the wrapping property to account for line breaks and disregard white space. Then, in theory, one could indent the markup for readability. This document is for personal use and semantically organized and indented for readability. The correct markup will help me understand or edit the document two years from now. In addition, it forms my quick reference to copy & paste tags.

The following class style did not produce the <textarea> desired attributes.

Code:

pre.CodeExample {
	/*background-color: transparent;*/
	border: medium inset #CCCCCC;
	font-family: "Courier New", Courier, monospace;
	margin: 1em 2em 1em 2em;
	overflow: auto;
	padding: .5em .5em .5em .5em;
	white-space: nowrap;
}

Please let me know what are the default CSS attributes for the <pre> and <textarea> tags.
Please let me know if you have any suggestions about styling the <pre> tag or links to cool implementations. You may review my markup at the following link.

http://www.geocities.com/robert_neville310/Template_Sample.html#blockquote

The Blockquote section has several methods for displaying code. I am looking to consolidate and standardize my classes. Suggestions are welcomed.

div.ExampleOutput
pre.CodeExample

Hi, my xml code is:

<room>
<features>
<pool/>
<Aircon/>
<Radio/>
<DVD/>
<beds double="2"/>
</features>
</room>

<room>
<features>
<pool/>
<TV/>
<VCR/>
<beds twin="1" double="2"/>
</features>
</room>

i want to Display the word "Features" in bold, then under the word features i want the list of features to be displayed with bullet points. I want beds to appear in bold in the list.

This is the code i have so far:

features{
}

features:before {
content:"Features";
font-weight:bold;
}

beds:before{
content:"Beds: ";
}

beds[sofa-bed]:after{
content:attr(sofa-bed)" x Sofa-bed ";
}

beds[double]:after{
content:attr(double)" x Double ";
}

beds[twin]:after{
content:attr(twin)" x Twin ";
}


The problem is, i can't get in to display anything except, the beds entry. But when it displays the beds entry, it only gives the last one in the list. So the one with a twin and a double, only the twin is displayed.

Any idea's?

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?