We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Course Of The Month
7 days, 23 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Creating an input field without borders
Posted on 2001-08-29
Experts,
Due to some functional requirements, I need to create an input field but,
1. I want the input field to have no borders.
2. I want to be able to make the background color of the input field blend in with environment around it.
Is there any way to do this. Ie, can I set the input field's properties for borders and background color??
Eventually, I want there to be a field with a value in it, but the user should not know that it is an input field, with the borders absent, and the color blending in with the page.
Due to some functional requirements, I need to create an input field but,
1. I want the input field to have no borders.
2. I want to be able to make the background color of the input field blend in with environment around it.
Is there any way to do this. Ie, can I set the input field's properties for borders and background color??
Eventually, I want there to be a field with a value in it, but the user should not know that it is an input field, with the borders absent, and the color blending in with the page.
[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
7-
6
3- +5
24 Comments
I have NEVER seen this effect.
I imagine you could make an ActiveX control that hides the borders, but HTML is too "subject to the browser" to handle this effect.
I imagine you could make an ActiveX control that hides the borders, but HTML is too "subject to the browser" to handle this effect.
You can do this with cascading style sheets, but it only works for IE 5+ - you cannot do it with NN:
<html>
<head>
<title>untitled</title>
<style type="text/css">
.custom {
font-family: Arial, sans, Helvetica;
font-size: 9pt;
color: #000000;
border: solid #000000 0px;
background-color: #FFCC33;
}
</style>
</head>
<body>
<input class="custom" type="text">
</body>
</html>
<html>
<head>
<title>untitled</title>
<style type="text/css">
.custom {
font-family: Arial, sans, Helvetica;
font-size: 9pt;
color: #000000;
border: solid #000000 0px;
background-color: #FFCC33;
}
</style>
</head>
<body>
<input class="custom" type="text">
</body>
</html>
Correct - thats about as close as you can get, however, in NN you can change border colors:
<html>
<head>
<title>untitled</title>
<style type="text/css">
input {
font-family: Arial, sans, Helvetica;
font-size: 9pt;
color: #ffffff;
border: #ffffff 0px;
background-color: #ffffff;
}
</style>
</head>
<body>
<input name="styleinput" type="text">
</body>
</html>
Thats about as close as you can get.
see http://www.studio2online.net for other css examples as on the home page.
<html>
<head>
<title>untitled</title>
<style type="text/css">
input {
font-family: Arial, sans, Helvetica;
font-size: 9pt;
color: #ffffff;
border: #ffffff 0px;
background-color: #ffffff;
}
</style>
</head>
<body>
<input name="styleinput" type="text">
</body>
</html>
Thats about as close as you can get.
see http://www.studio2online.net for other css examples as on the home page.
Experts,
I tried your suggestion in NN 4.7.0.2.
<html>
<head>
<title>untitled</title>
<style type="text/css">
input {
font-family: Arial, sans, Helvetica;
font-size: 9pt;
color: #ffffff;
border: #ffffff 0px;
background-color: #ffffff;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input name="styleinput" type="text" value="test">
</td>
<td>
<input name="input" type="text" value="test again">
</td>
<td>
test
</td>
</tr>
</table>
</body>
</html>
However, I do not even see the text that should appear in the text boxes. Do you have a solution for this problem? What is wrong in my code?
I tried your suggestion in NN 4.7.0.2.
<html>
<head>
<title>untitled</title>
<style type="text/css">
input {
font-family: Arial, sans, Helvetica;
font-size: 9pt;
color: #ffffff;
border: #ffffff 0px;
background-color: #ffffff;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input name="styleinput" type="text" value="test">
</td>
<td>
<input name="input" type="text" value="test again">
</td>
<td>
test
</td>
</tr>
</table>
</body>
</html>
However, I do not even see the text that should appear in the text boxes. Do you have a solution for this problem? What is wrong in my code?
<html>
<head>
<title>untitled</title>
<style type="text/css">
input {
font-family: Arial, sans, Helvetica;
font-size: 9pt;
color: #000000;
border: #ffffff 0px;
background-color: #ffffff;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input name="styleinput" type="text" value="test">
</td>
<td>
<input name="input" type="text" value="test again">
</td>
<td>
test
</td>
</tr>
</table>
</body>
</html>
your color is the same as the bgcolor
<head>
<title>untitled</title>
<style type="text/css">
input {
font-family: Arial, sans, Helvetica;
font-size: 9pt;
color: #000000;
border: #ffffff 0px;
background-color: #ffffff;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input name="styleinput" type="text" value="test">
</td>
<td>
<input name="input" type="text" value="test again">
</td>
<td>
test
</td>
</tr>
</table>
</body>
</html>
your color is the same as the bgcolor
HI mmc98dl1,
I just tried to view the code you sent back in NN, but the values in the text boxes do not show up.
What is still wrong with it?
I just tried to view the code you sent back in NN, but the values in the text boxes do not show up.
What is still wrong with it?
HI mmc98dl1,
I just tried to view the code you sent back in NN, but the values in the text boxes do not show up.
What is still wrong with it?
I just tried to view the code you sent back in NN, but the values in the text boxes do not show up.
What is still wrong with it?
HI mmc98dl1,
I just tried to view the code you sent back in NN, but the values in the text boxes do not show up.
What is still wrong with it?
I just tried to view the code you sent back in NN, but the values in the text boxes do not show up.
What is still wrong with it?
I just tried in NN6 and it works, so it must be a varying functionality between versions.
The only other thing is the order of the rules, try putting them in a different order, as NN is very particular.
font-style
font-weight
font-variant
font-size
font-family
is the best order.
If this doesnt work, try
input {
font-family: Arial, sans, Helvetica;
font-size: 9pt;
color: #000000;
border: #ffffff 0px IMPORTANT;
background-color: #ffffff;
}
The only other thing is the order of the rules, try putting them in a different order, as NN is very particular.
font-style
font-weight
font-variant
font-size
font-family
is the best order.
If this doesnt work, try
input {
font-family: Arial, sans, Helvetica;
font-size: 9pt;
color: #000000;
border: #ffffff 0px IMPORTANT;
background-color: #ffffff;
}
input {
border: #ffffff 0px IMPORTANT;
color: #000000;
background-color: #ffffff;
font-size: 9pt;
font-family: Arial, sans, Helvetica;
}
border: #ffffff 0px IMPORTANT;
color: #000000;
background-color: #ffffff;
font-size: 9pt;
font-family: Arial, sans, Helvetica;
}
Expert,
The example you provided works in IE and NN 6.0, but not in NN 4.7.0.2.
Are you aware of any way this can work in NN 4.7?
The example you provided works in IE and NN 6.0, but not in NN 4.7.0.2.
Are you aware of any way this can work in NN 4.7?
Like I say try some variants, in the order in which you have the styles #. Thats the only thing I can think of.
Also bear in mind the world in ever advancing, the number of NN4 browsers (2%) is rapidly disappearing, in favour of NN6 (8%), and IE 5.x(90%) So you might be wasting slightly too much time on this??
Also bear in mind the world in ever advancing, the number of NN4 browsers (2%) is rapidly disappearing, in favour of NN6 (8%), and IE 5.x(90%) So you might be wasting slightly too much time on this??
Hey, Tewald,
How would you do Checkboxes and Selects (comboboxes)?
I want all inputs to match. I'm thinking of using two
images for the checkboxes, though...
How would you do Checkboxes and Selects (comboboxes)?
I want all inputs to match. I'm thinking of using two
images for the checkboxes, though...
Same thing with the style sheet:
select {
border: #ffffff 0px IMPORTANT;
color: #000000;
background-color: #ffffff;
font-size: 9pt;
font-family: Arial, sans, Helvetica;
}
input {
border: #ffffff 0px IMPORTANT;
color: #000000;
background-color: #ffffff;
font-size: 9pt;
font-family: Arial, sans, Helvetica;
}
textarea {
border: #ffffff 0px IMPORTANT;
color: #000000;
background-color: #ffffff;
font-size: 9pt;
font-family: Arial, sans, Helvetica;
}
select {
border: #ffffff 0px IMPORTANT;
color: #000000;
background-color: #ffffff;
font-size: 9pt;
font-family: Arial, sans, Helvetica;
}
input {
border: #ffffff 0px IMPORTANT;
color: #000000;
background-color: #ffffff;
font-size: 9pt;
font-family: Arial, sans, Helvetica;
}
textarea {
border: #ffffff 0px IMPORTANT;
color: #000000;
background-color: #ffffff;
font-size: 9pt;
font-family: Arial, sans, Helvetica;
}
No workie on Checkboxes and selects...
What is the meaning of the word IMPORTANT in your CSS?
Is it a keyword?
What is the meaning of the word IMPORTANT in your CSS?
Is it a keyword?
No workie on Checkboxes and selects...
What is the meaning of the word IMPORTANT in your CSS?
Is it a keyword?
What is the meaning of the word IMPORTANT in your CSS?
Is it a keyword?
Netscrap 4.x does not support much styling for inputs.
mmc98dl1,
Your syntax is incorrect. It is !important not important. The way you have it, it will be ingnored, and in some browsers the whole declaration will be ignored.
qvijay1,
The declarations given to you by tewald are the correct way to do what you want. It is not possibile in Netscrape 4.x
Cd&
mmc98dl1,
Your syntax is incorrect. It is !important not important. The way you have it, it will be ingnored, and in some browsers the whole declaration will be ignored.
qvijay1,
The declarations given to you by tewald are the correct way to do what you want. It is not possibile in Netscrape 4.x
Cd&
Here is the Solution
<HTML>
<HEAD>
<style type="text/css">
INPUT {
COLOR: #336699; FONT-FAMILY: verdana, helvetica, trebuchet, arial; FONT-SIZE: 9pt! important; FONT-WEIGHT: normal; TEXT-DECORATION: none; BORDER: white 10px;BACKGROUND-COLOR: moccasin;
}
</style>
<TITLE></TITLE>
</HEAD>
<BODY>
<input type="text" name="xyz"><br>
<input type="text" name="dfd">
<P> </P>
</BODY>
</HTML>
You need to change only the background color and border color,Font Color (COLOR property) according to you requirement.
hope this helps...
Akshay
<HTML>
<HEAD>
<style type="text/css">
INPUT {
COLOR: #336699; FONT-FAMILY: verdana, helvetica, trebuchet, arial; FONT-SIZE: 9pt! important; FONT-WEIGHT: normal; TEXT-DECORATION: none; BORDER: white 10px;BACKGROUND-COLOR: moccasin;
}
</style>
<TITLE></TITLE>
</HEAD>
<BODY>
<input type="text" name="xyz"><br>
<input type="text" name="dfd">
<P> </P>
</BODY>
</HTML>
You need to change only the background color and border color,Font Color (COLOR property) according to you requirement.
hope this helps...
Akshay
This question has been abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.
Cd&
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.
Cd&
Featured Post
We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Suggested Solutions
| Title | # Comments | Views | Activity |
|---|---|---|---|
| Timer on div | 5 | 34 | |
| I need to make my existing Javascript Menu conditional within my ASP.Net/C# Application | 32 | 53 | |
| Is it obvious to anyone what on earth has happened to these page layouts - wordpress, css | 5 | 47 | |
| Add Rows on a Table | 8 | 50 |
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing.
Set up your basic HTML file. Open your form tag and set the method and action attributes.:
(CODE)
Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month7 days, 23 hours left to enroll
739 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.