CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

CSS: transparant textarea & input text

Discuss CSS: transparant textarea & input text in the CSS Help forum on Dev Shed.
CSS: transparant textarea & input text Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old December 19th, 2002, 11:53 AM
coolen coolen is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2002
Location: Netherlands
Posts: 3 coolen User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
CSS: transparant textarea & input text
Hi,

I'm fairly new in CSS

I need to have transparent TEXTAREAS and transparent INPUT TYPE=TEXT boxes.

What I have now is:


<html>
<head>
<style type="text/css">
textarea,input
{
background:transparent
}
</style>
</head>


However, this also makes all the other info stuff transparant, even the buttons. This is an exsting HUGE pile of php scripts, so I wanted to do the layout in css, and not going to the burden of searching all buttons and give them a class or a local style color.

Is it possible to distinguish between the different INPUT types in CSS ???
Reply With Quote
  #2  
Old December 19th, 2002, 11:58 AM
degsy degsy is offline
Contributing User
Dev Shed Intermediate (1500 - 1999 posts)
  
Join Date: Nov 2001
Posts: 1,882 degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 5 Days 21 h 19 m 30 sec
Reputation Power: 13
Yes, but it probably won't help you much because most browsers don't support it (also most users use IE)

Quote:
input[type=button], input[type=reset], input[type=submit],
input[type=checkbox], input[type=radio], textarea, input,
input[type=text], input[type=hidden], input[type=password],
input[type=image]
Reply With Quote
  #3  
Old December 19th, 2002, 12:28 PM
coolen coolen is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2002
Location: Netherlands
Posts: 3 coolen User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
But it is good enough, thanx.

It's working in netscape 7 and since it's private anyway we can tell what browser to use

Besides, I just found out that the above transparance isn't working for IE anyway, also not with the textarea.

So thanks a bundle
Reply With Quote
  #4  
Old December 19th, 2002, 01:03 PM
Tuxie Tuxie is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2002
Location: Inside the GNU/Hurd kernel
Posts: 492 Tuxie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 1 m
Reputation Power: 7
Quote:
Originally posted by degsy
Yes, but it probably won't help you much because most browsers don't support it


This is not correct,most browsers do support it (Mozilla,Konqueror,Opera etc.),only IE doesn't.
Reply With Quote
  #5  
Old December 19th, 2002, 01:11 PM
degsy degsy is offline
Contributing User
Dev Shed Intermediate (1500 - 1999 posts)
  
Join Date: Nov 2001
Posts: 1,882 degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level)degsy User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 5 Days 21 h 19 m 30 sec
Reputation Power: 13
Well, that's 3, which doesn't help much Also it depeands on the versions of those browsers.

http://www.w3schools.com/browsers/browsers_stats.asp
Reply With Quote
  #6  
Old December 20th, 2002, 03:26 AM
ztevie ztevie is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2002
Posts: 4 ztevie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Does'nt work in IE??
Well, it works in mine anyway....

To go back to the first question. What you should do instead of setting all textareas and inputs to transparent, make a class:

<html>
<head>
<style type="text/css">
.transItems
{
background:transparent
}
</style>
</head>

then..
<input type="text" class="transItems" value="Yihaa, did it...">
Reply With Quote
  #7  
Old December 20th, 2002, 04:59 AM
coolen coolen is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2002
Location: Netherlands
Posts: 3 coolen User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Well If we go back to the fisrt question, I did ask for a solution without using class. I thank you for the explanation, but I will have to go through 1000's of lines of code in about 50+ scripts to alter it then. The 1st solution is (for the moment) the best there is.

Further, It really isn't working in IE (at least not the IE I got with WinXP pro SP1.) I don't know why however. I just dropped it under the tab Gates-Sun debacle

Thanx all of you
Reply With Quote
  #8  
Old December 20th, 2002, 06:16 AM
ztevie ztevie is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2002
Posts: 4 ztevie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Oh, sorry.... I missed that.
I use IE 5.5 on Win 2000 and it works fine? Strange if it would make a difference what OS you've got, or if IE is version same as mine or later??
Reply With Quote
  #9  
Old December 20th, 2002, 06:50 AM
Tuxie Tuxie is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2002
Location: Inside the GNU/Hurd kernel
Posts: 492 Tuxie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 1 m
Reputation Power: 7
ztevie,are you sure that it works?Does it only apply the style to the type of input specified or to all inputs?Because according to
CSS2 test it doesn't work in any version of IE....
Reply With Quote
  #10  
Old December 20th, 2002, 08:41 AM
ztevie ztevie is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2002
Posts: 4 ztevie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
It works for me. I use it in a stylesheet included on an asp-page with : <link rel="stylesheet" type="text/css" href="../includes/main.css"> I've put it in a class, but I tried to apply it to <INPUT>, and it worked there too?

The browser is the IE 5.5 on Win2000.
Reply With Quote
  #11  
Old December 20th, 2002, 09:31 AM
Tuxie Tuxie is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2002
Location: Inside the GNU/Hurd kernel
Posts: 492 Tuxie User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 1 m
Reputation Power: 7
Quote:
Originally posted by ztevie
It works for me. I use it in a stylesheet included on an asp-page with : <link rel="stylesheet" type="text/css" href="../includes/main.css"> I've put it in a class, but I tried to apply it to <INPUT>, and it worked there too?

The browser is the IE 5.5 on Win2000.


What I am asking is:does it apply the styles to all INPUT or just the specified ones??
Reply With Quote
  #12  
Old November 18th, 2003, 10:42 PM
fall_crystalz's Avatar
fall_crystalz fall_crystalz is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: boring-loserville aka calgary, alberta, canada
Posts: 1 fall_crystalz User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via AIM to fall_crystalz Send a message via Yahoo to fall_crystalz
mine works on IE perfectly^^. its the newest version in windows xp...(not sure what the exact name is but oh well)

BTW... i've tried your script ztevie and is it possible to use html in the textarea? ill try putting in a vertical scrollbar in it because all the text seems to do is go on and on on the same line and i can't get it to go on a new line....

Quote:
<html>
<head>
<style type="text/css">
.transItems
{
background:transparent
}
</style>
</head>

then..
<input type="text" class="transItems" value="Yihaa, did it...">
Reply With Quote
  #13  
Old November 19th, 2003, 07:03 AM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
  
Join Date: Mar 2002
Location: norway
Posts: 2,622 Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 3 Weeks 6 Days 2 h 13 m 2 sec
Reputation Power: 548
well it works with class in ie,
but ie doen't understand
attribute selectors
http://www.w3.org/TR/CSS2/selector....ibute-selectors

try this in ie, and moz

Code:
 <html>
<head>
<style type="text/css">

body {
	background:#ddd;
}

input[type="text"] {
	background:transparent;
	width:75%;
	border:1px dotted;
}

input[type="submit"] {
	background:#16a;
	border:1px solid;
}
</style>
</head>

<body>

<form action="" method="post">
	<div>
		<label>Søkestreng</label>
		<input type="text" name="bnavn" />
	</div>

	<div>
		<label>Søk i:</label>
		<input type="submit" value="Søk" />
	</div>
</form>

</body>
</html>
Reply With Quote
  #14  
Old November 19th, 2003, 09:10 AM
Immortal1490 Immortal1490 is offline
syndicatetech.com
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Posts: 412 Immortal1490 User rank is Corporal (100 - 500 Reputation Level)Immortal1490 User rank is Corporal (100 - 500 Reputation Level)Immortal1490 User rank is Corporal (100 - 500 Reputation Level)Immortal1490 User rank is Corporal (100 - 500 Reputation Level)  Folding Points: 13762 Folding Title: Novice Folder
Time spent in forums: 3 Days 23 h 37 m 57 sec
Reputation Power: 7
im not on a computer with a text editor...
but I always did something like

<input style="filter:alpha(opacity: '10');">

or something like that. Once i get home ill get you the accurate code.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS: transparant textarea & input text

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump