• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 205
  • Last Modified:

Formatting INPUT and SELECT elements

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
red_2
Asked:
red_2
  • 2
  • 2
  • 2
  • +2
1 Solution
 
COBOLdinosaurCommented:
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
 
jpoesenCommented:
to take up the remaining space, use :

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

jpoesen
0
 
b1xml2Commented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
b1xml2Commented:
LOL, jpoesen, u beat me to it LOL!
0
 
COBOLdinosaurCommented:
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
 
jpoesenCommented:
sorry b1xml2 :)
0
 
TenTonJimCommented:
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
 
red_2Author Commented:
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now