...

View Full Version : border on a Select



optimum
10-03-2002, 09:09 PM
I have used a style statement to make my inputs look a certain way. It does not want to work for the drop down list.
Can someone please tell me how to make my drop down look like the other text inputs? Or point me in the right direction.

http://home.earthlink.net/~optimum/cxw101test.htm

Thanks

beetle
10-03-2002, 11:37 PM
They won't receive border styles in IE. SELECT objects are windowed controls (provided by the OS, not the browser)

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/select.asp
Click on the 'Styles' link to see what styles the select supports in IE

NS and Moz use their own widgets for selects, so they can recieve border styles (as well as others)

MCookie
10-04-2002, 01:16 AM
Just add a border here:

.dsp1 {border:1px solid #670001;font-family:arial;font-size:12;color:black;}

adios
10-04-2002, 02:38 AM
As stated, select border is pretty hard-wired...you can sort of 'disguise' it:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

.ent1 {
font: 200 12px arial,verdana,sans-serif;
color: black;
}

.dsp1 {
position: relative;
font: 400 10px arial,verdana,sans-serif;
color: white;
border: 1px solid #670001;
background: black;
}

-->
</style>
</head>
<body vlink="#0000FF" alink="#0000FF">
<table width=100%>
<tr>
<td class="ent1" nowrap><b>Last Name</b>
<font color=red>*</font>&nbsp;&nbsp;
<input class="dsp1" type="text" size="25" maxlength="25" name="vlname">&nbsp;&nbsp;
<select class="dsp1" style="position;relative;top:2px;background:black;color:white;" name="vsuff" onchange="vfname.focus()">
<option value="None">None</option>
<option value="JR">Jr.</option>
<option value="SR">Sr.</option>
</select>&nbsp;&nbsp;
<b>First Name<font color=red>*</font></b>&nbsp;
<input class="dsp1" type="text" size="20" name="vfname">
&nbsp;&nbsp;<b>MI</b>&nbsp;
<input class="dsp1" type="text" size="1" name="vmname"></font>
</td></tr></table></form></body></html>

...or:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

.ent1 {
position:relative;
font: 200 12px arial,verdana,sans-serif;
color: black;
}

select.dsp1 {
position:relative;
top: 1px;
font: 400 10px arial,verdana,sans-serif;
color: black;
background: #f5f5f5;
}

input.dsp1 {
font: 400 10px arial,verdana,sans-serif;
color: black;
border: 2px inset #c0c0c0;
border-top: 2px inset #c0c0c0;
border-right: 1px inset #c0c0c0;
border-bottom: 1px inset #c0c0c0;
border-left: 2px inset #c0c0c0;
background: #f5f5f5;
}

-->
</style>
</head>
<body vlink="#0000FF" alink="#0000FF">
<table width=100%>
<tr>
<td class="ent1" nowrap><b>Last Name</b>
<font color=red>*</font>&nbsp;&nbsp;
<input class="dsp1" type="text" size="25" maxlength="25" name="vlname">&nbsp;&nbsp;
<select class="dsp1" name="vsuff" onchange="vfname.focus()">
<option value="None">None</option>
<option value="JR">Jr.</option>
<option value="SR">Sr.</option>
</select>&nbsp;&nbsp;
<b>First Name<font color=red>*</font></b>&nbsp;
<input class="dsp1" type="text" size="20" name="vfname">
&nbsp;&nbsp;<b>MI</b>&nbsp;
<input class="dsp1" type="text" size="1" name="vmname"></font>
</td></tr></table></form></body></html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum