PDA

View Full Version : How to change color of inset borders of input boxes?

kippie
03-06-2003, 11:05 AM
I would like to change the colors of input boxes, for example to change the color black of the inset borders into blue inset border (see HTML below).

Can anyone help?

This is the HTML:

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Untitled Document</title>
</head>

<body bgcolor="white" text="black">
<form>
<table width="572" border="0">
<tr height="35">
<td width="96" class="tekst" height="35" align="left" valign="top">Email<font color="#ff9933" face="Arial,Helvetica,sans-serif" size="2">*</font><font color="#4c5ea1"> </font></td>
<td valign="top" align="left" colspan="3" height="35"><input type="text" name="email" size="20" class="textfield"></td>
<td width="1" height="35"></td>
<td valign="top" colspan="2" align="left" height="35">Addres<font color="#ff9933" face="Arial,Helvetica,sans-serif" size="2">*</font></td>
<td valign="top" align="left" colspan="4" height="35"><input type="text" name="adres" size="20" class="textfield"></td>
</tr>
</table>
</form>
</body>

</html>

Kippie
Jason
03-06-2003, 10:08 PM
here is something similar from the HTML/CSS area of coding forums
http://www.codingforums.com/showthread.php?s=&threadid=15008&highlight=color


Jason
cg9com
03-07-2003, 02:49 AM
you can just use CSS:
<style>
input.myselector {
border:3px inset blue;
}
</style>
<input class="myselector">
kippie
03-07-2003, 12:16 PM
Thanks C9com,

This works great. One more question: how to apply this to "drop down boxes". I thought I could add your class also to those lists but apparently that does not work or I do something wrong.

This is my new HTML:

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Untitled Document</title>

<style type="text/css"><!--
input.myselector {
border:6px inset blue;
}
</style>

-->
</style>

</head>

<body bgcolor="white" text="black">
<form>
<table width="572" border="0">
<tr height="35">
<td width="96" class="tekst" height="35" align="left" valign="top">Email<font color="#ff9933" face="Arial,Helvetica,sans-serif" size="2">*</font><font color="#4c5ea1"> </font></td>
<td valign="top" align="left" colspan="3" height="35"><input type="text" name="email" size="20" class="textfield"></td>
<td width="1" height="35"></td>
<td valign="top" colspan="2" align="left" height="35">Addres<font color="#ff9933" face="Arial,Helvetica,sans-serif" size="2">*</font></td>
<td valign="top" align="left" colspan="4" height="35"><input type="text" name="adres" size="20" class="myselector"></td>
<td><select class="myselector" name="eerste voorkeur">
<option selected>choose</option>
<option>choice1</option>
<option>choice2</option>
<option>choice3</option>
</select></td>

</tr>
</table>
</form>
</body>

</html>

Kippie
speedracer
03-07-2003, 12:22 PM
dropdownboxes are select:

sample

select {font-family: "verdana", "arial", "tahoma"; font-size: 7.5pt; color:#ffffff; background-color: #ff8400; width: 140px}
cg9com
03-08-2003, 12:04 AM
indeed they are speedracer, however select borders cannot be styled in IE, this may be why you are having problems, because its not actually a problem at all.
kippie
03-08-2003, 09:07 AM
Thanks

Kippie