Solved

Formatting INPUT and SELECT elements

Posted on 2002-05-06
8
197 Views
Last Modified: 2010-04-09
I'm using INPUT and SELECT elements in a TABLE and would like to be able to make them use up the remaining space in a cell, instead of using a predetermined size. How do I do that?

Also, I would like to know how to change the back and foreground colors of those kinds of elements.
0
Comment
Question by:red_2
  • 2
  • 2
  • 2
  • +2
8 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 300 total points
ID: 6991192
If they all need to be the same put this in the head of the page.


<style>
   input {width:100;height:25;color:blue;background-color:yellow}
   select (width:200;color:red;background-color;green}
</style>

If they need to be handled individually style them inline like this:

<select style="width:200;color:red;background-color;green">


Almost all styling of form elements will be ignored by Netscrap 4.x and there is no workaround

Cd&
0
 
LVL 2

Expert Comment

by:jpoesen
ID: 6991305
to take up the remaining space, use :

<input type="text" style="width:100%">
and
<select style="width:100%">

jpoesen
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6991308
sample code to ensure form elements fill up the space available in the table
======================
<html>
<head>
<title>Sizing Demo</title>
<style>
.data {width:100%;}
td {background:#fafad2;font-size:9pt;font-family:Verdana;}
select, input {font-family:Verdana;font-size:9pt;}
</style>
</head>
<body>
<form name="myform">
<table width="100%" cellpadding="4" cellspacing="1" style="background:#dda0dd;">
<tr>
<td width="50%" align="right">User Name</td>
<td width="50%"><input type="text" name="user" class="data" style="background:#00bfff;"></td>
</tr>
<tr>
<td width="50%" align="right">Country</td>
<td width="50%">
<select class="data" name="country" style="background:#db7093;color:#ffff00;">
<option value="UK">United Kingdom</option>
<option value="US">United States</option>
</select>
</tr>
</table>
</form>
</body>
</html>

Notes
=====
1. Cd& has shown how to set the background and color accordingly.

2. What this code shows is that to ensure that the elements take up all the space, the CSS width property should be set to 100%. Even if you set the width of the table to say 450, the form elements will take up the available space.
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6991310
LOL, jpoesen, u beat me to it LOL!
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6991330
Using percentages on form elements inside of cells can cause rendering errors, escpecially for the selects.  That can be minimized by including margin:0 on the inputs and selet styles and setting styling on the td tags to include padding:0.  You cannot rely on cellpadding="0" on the table tag to handle it.

Cd&
0
 
LVL 2

Expert Comment

by:jpoesen
ID: 6992360
sorry b1xml2 :)
0
 
LVL 2

Expert Comment

by:TenTonJim
ID: 6993016
like b1xml2 except you can add the background color and font color to the style sheet as well, keeping everything out of the inline style...
---------------
<style>
.data
{
width:100%;
background-color:gainsboro;
color:navy;
font-family:Verdana;
font-size:10pt;
}
.dataforselect
{
width:100%;
background-color:yellow;
color:blue;
font-family:Verdana;
font-size:10pt;
}
.clicker /*for the button*/
{
width:200px or whatever;
background-color:black;
color:yellow;
font-family:Verdana;
font-size:10pt;
}
td
{
background-color:#fafad2;
font-size:9pt;
font-family:Verdana;
}
</style>
---------------
html

<select name="sometin" class="dataforselect">
<option etc etc etc

<input type="text" name="sometinstringy" class="data">

<input type="submit" value="submit" class="clicker">



JimS.
0
 

Author Comment

by:red_2
ID: 6994767
Thanks for the answers everyone!

Since COBOLDinosaur and jpoesen answered one part each, and before anyone else, (tough luck b1xml2 ;) I've decided to give both of you full credit. COBOLDinosaur gets the points for this question, and I'm making a new one to give 300 points to jpoesen as well.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now