Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

remove sunken effect from a textfield 1

Status
Not open for further replies.

optjco

IS-IT--Management
Apr 13, 2004
185
0
0
GB
Hi,
Is there a way to remove the sunken effect from a text field. I am using the field to display info and would like the effect to be flat

Any Ideas

Regards

Olly
 
You can do this using CSS quite easily.

Use

<input type=text style="border: 1px solid #000000">
 
Is there a reason that you are using a text field? If you are not submitting it you could use a span or a div.
 
yandso,
could you elaborate on "If you are not submitting it you could use a span or a div".

What I am doing is displaying data from a DB the background colour of the cell is "#CCCCCC" and what i am doing is putting the data into a textfield so that I can have the text against a different background.

If there is another way to do this I am quite willing to learn

Regards

Olly
 
If you plave the text in a span or div tag you could use style to make it look any way you want without the side effect of it being passed in whatever form your working on. If you don't need the data passed then you could just as easily place it in a span. Take for instnce this example which first has the user submit data then displays it back to them the same way to verify it:
Code:
<%
If Request.Form("btnSubmit") <> "" Then
   %>
   <html>
   <body>
   <h3>Your Data HAs Been Submitted:</h3>
   ID: <div style="border: 1px solid blue; width: 150px;"><%=Request.Form("txtID")%></div><br>
   Name: <div style="border: 1px solid blue; width: 150px;"><%=Request.Form("txtName")%></div>
   </body>
   </html>
   <%
Else
   %>
   <html>
   <body>
   <h3>Please Enter Your Data:</h3>
   <form method="POST" action="ThisPage.asp">
   ID: <input style="border: 1px solid blue; width: 150px;" name="txtID"><br>
   Name: <input style="border: 1px solid blue; width: 150px;" name="txtName"><br>
   <input type="submit" name="btnSubmit" value="Submit!" style="border: 1px solid blue;">
   </form>
   </body>
   </html>
   <%
End If
%>

So in this case they see thedataagain in about the same way they originally submitted it, but now it is non-editable because it is in div tags. Another option would be to place non-editable data in hidden inputs and display it in div's (if you need it on the next page). Assume for the moment that we have a form where we know the user information, need the user id on thenext page, but also want them to enter some new piece of data:
Code:
<html>
<body>
<form method="POST" aciton="SaveColor.asp">
User ID: <div style="border:1px solid #006600; width: 150px;">#123</div>
<input type="hidden" name="userID" value="123"><br>
User Name: <div style="border: 1px solid #006600; width: 150px;">Bob Smith</div><br>
Please Enter Favorite Color: <input type="text" name="color" style="border:1px solid #660000"><br>
<input type="submit" value="Save My Color">
</form>
</body>
</html>
There we go, the user information is secure from being changed but follows the same look and feel throughout the form.

Ormaybe you want to make a table look like an excel spread sheet, so all the cells have to look alike, but some of them aren't editable:
Code:
<html>
<head>
<style>
/* Class displayTable */
.displayTable{
	background-color:#bbbbbb;		/* Background color */
	border-right:1px solid #555555; /* Border Right - size, type, color */
	border-bottom:1px solid #555555;/* Border Bottom- size, type, color */
	font-size:13px;					/* Font Size (in pixels) */
	}
/* td tags inside class displayTable */
.displayTable td{
	background-color:#f3f3f3;
	border-right:1px solid #bbbbbb; 
	border-bottom:1px solid #bbbbbb;	
	text-align:Center;				/* text Alignment in element */
}
/* th tags inside class displayTable */
.displayTable th{
	background-color:#bbbbbb;
	border-width:1px;				/* border widt for all 4 borders */
	border-style: solid;			/* border style for all 4 borders */
	border-color: #eeeeee #555555 #555555 #eeeeee; /* border colors, top, rt, bottom, left */
	font-size:14px;
	padding: 0px 8px 0px 8px;		/* paddin between text inside element and outer border, top, rt, bot, left */
}
/* inputs inside class displayTable */
.displayTable input{
	width:100%;						/* width of element, relative to outside element */
	margin:0px;
	border-width: 0px;
	border-bottom:1px dashed #bbbbbb;
	font-size:12px;
}
/* not_input class inside displayTable */
.displayTable .not_input{
	padding: 0px 8px 0px 8px;
}
</style>
</head>
<body>
<h3>Favorite Colors:</h3>
<form method="post" action="SaveColors.asp">
<table class="displayTable" cellpadding="0" cellspacing="0">
	<tr>
		<th>&nbsp;</th>
		<th>ID</th>
		<th>Name</th>
		<th>Color</th>
	</tr>
	<tr>
		<th>1</th>
		<td><div class="not_input">123</div><input type="hidden" name="UserId_1" value="123"></td>
		<td><div class="not_input">Bob Jones</div></td>
		<td><input type="text" name="color_1"></td>
	</tr>
	<tr>
		<th>2</th>
		<td><div class="not_input">456</div><input type="hidden" name="UserId_2" value="123"></td>
		<td><div class="not_input">Nancy Smith</div></td>
		<td><input type="text" name="color_2"></td>
	</tr>
	<tr>
		<th>3</th>
		<td><div class="not_input">777</div><input type="hidden" name="UserId_3" value="123"></td>
		<td><div class="not_input">John Webb</div></td>
		<td><input type="text" name="color_3"></td>
	</tr>
</table>
<br>
<input type="submit" value="Save Colors!">
</form>
</body>
</html>
I moved the style to a style section in the head this time so I wouldn't have to retype the longer style definitions, I tried to comment eveything to make it understandable (except where it repeated an earlier line).

Anyways, hope that provides some examples for you,

-T

[sub]01000111 01101111 01110100 00100000 01000011 01101111 01100110 01100110 01100101 01100101 00111111[/sub]
Need an expensive ASP developer in the North Carolina area? Feel free to let me know.


 
tarwn,
thank you so much for that, i will start looking at it and let you know how i get on. it maybe some while though as i want to understand it fully

Regards

Olly
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top