Solved

Creating an input field without borders

Posted on 2001-08-29
24
2,221 Views
Last Modified: 2008-02-26
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.
0
Comment
Question by:gvijay1
  • 7
  • 6
  • 3
  • +5
24 Comments
 
LVL 6

Expert Comment

by:Triskelion
ID: 6439167
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.
0
 
LVL 2

Accepted Solution

by:
tewald earned 75 total points
ID: 6439226
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>



0
 
LVL 6

Expert Comment

by:Triskelion
ID: 6439234
Well done, tewald!
0
 
LVL 12

Expert Comment

by:mmc98dl1
ID: 6439623
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.
0
 

Author Comment

by:gvijay1
ID: 6441132
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?
0
 
LVL 12

Expert Comment

by:mmc98dl1
ID: 6441207
<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
0
 

Author Comment

by:gvijay1
ID: 6441288
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?
0
 

Author Comment

by:gvijay1
ID: 6441356
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?
0
 

Author Comment

by:gvijay1
ID: 6441457
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?
0
 
LVL 12

Expert Comment

by:mmc98dl1
ID: 6441499
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;
}
0
 
LVL 12

Expert Comment

by:mmc98dl1
ID: 6441505
input {
border: #ffffff 0px IMPORTANT;
color: #000000;
background-color: #ffffff;
font-size: 9pt;
font-family: Arial, sans, Helvetica;
}
0
 

Author Comment

by:gvijay1
ID: 6441725
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?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 12

Expert Comment

by:mmc98dl1
ID: 6444029
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??
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 6445238
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...
0
 
LVL 12

Expert Comment

by:mmc98dl1
ID: 6445274
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;
}
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 6445565
No workie on Checkboxes and selects...

What is the meaning of the word IMPORTANT in your CSS?

Is it a keyword?

0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 6445681
No workie on Checkboxes and selects...

What is the meaning of the word IMPORTANT in your CSS?

Is it a keyword?

0
 

Author Comment

by:gvijay1
ID: 6445991
Thanks mmc98dl1,

all I can say is NN 4.7 sucks!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6447916
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&
0
 
LVL 12

Expert Comment

by:mmc98dl1
ID: 6450050
Cd, as ever, my brain thinks faster than my fingers.

qvijay - indeed netscrap does suck.
0
 

Expert Comment

by:akshayajmera
ID: 6511725
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>&nbsp;</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
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6629528
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&
 
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6694622
It is time to clean this abandoned question up.  

I am putting it on a clean up list for CS.

<recommendation>
points to tewald

</recommendation>

If anyone participating in the Q disagrees with the recommendation,
please leave a comment for the mods.

Cd&
0
 

Expert Comment

by:ComTech
ID: 6696360
Answer accepted by:

ComTech
Community Support
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Element alignment and word wrapping 9 60
SVG Logo 4 31
Blog posts not showing up on Blog page 7 50
Need to click button twice to get results 2 32
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
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…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

929 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now