#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Netherlands
    Posts
    3
    Rep 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 ???
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    Yes, but it probably won't help you much because most browsers don't support it (also most users use IE)

    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]
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Netherlands
    Posts
    3
    Rep 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
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Inside the GNU/Hurd kernel
    Posts
    492
    Rep Power
    12
    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.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    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
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Posts
    4
    Rep 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...">
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Netherlands
    Posts
    3
    Rep 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
  14. #8
  15. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Posts
    4
    Rep 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??
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Inside the GNU/Hurd kernel
    Posts
    492
    Rep Power
    12
    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....
  18. #10
  19. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Posts
    4
    Rep 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.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Inside the GNU/Hurd kernel
    Posts
    492
    Rep Power
    12
    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??
  22. #12
  23. Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    boring-loserville aka calgary, alberta, canada
    Posts
    1
    Rep Power
    0
    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....

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

    then..
    <input type="text" class="transItems" value="Yihaa, did it...">
  24. #13
  25. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    well it works with class in ie,
    but ie doen't understand
    attribute selectors
    http://www.w3.org/TR/CSS2/selector.h...bute-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&oslash;kestreng</label>
    		<input type="text" name="bnavn" />
    	</div>
    
    	<div>
    		<label>S&oslash;k i:</label>
    		<input type="submit" value="S&oslash;k" />
    	</div>
    </form>
    
    </body>
    </html>
  26. #14
  27. No Profile Picture
    syndicatetech.com
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    413
    Rep Power
    13
    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.

IMN logo majestic logo threadwatch logo seochat tools logo