Is there a pure CSS way to make an input transparent?

user_26004 0
Viewed 170922

How can I make this input transparent?

<input type="text" class="foo">

I've tried this but it doesn't work.

background:transparent url(../img/transpSmall.png) repeat scroll 0 0;
css html
7 Answers

If you want to remove the outline when focused as well try:

input[type="text"],
input[type="text"]:focus   
{
         background: transparent;
         border: none;
         outline-width: 0;
}
user_71905180

As a general rule, you should never completly remove the outline or :focus style.

https://a11yproject.com/posts/never-remove-css-outlines

...using outline: none without proper fallbacks makes your site significantly less accessible to any keyboard only user, not only those with reduced vision. Make sure to always give your interactive elements a visible indication of focus.

user_38778620

In case you just need the existence of it you could also throw it off the screen with display: fixed; right: -1000px;. It is useful when you need an input for copying to clipboard. :)

user_92257330
Related