Solved

Formatting INPUT and SELECT elements

Posted on 2002-05-06
8
201 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 23

Expert Comment

by:b1xml2
ID: 6991310
LOL, jpoesen, u beat me to it LOL!
0
 
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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

724 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