CODEWITHSUNDEEP
htmlcss
fmsf
fmsf

Reputation: 37137

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

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;

Upvotes: 73

Views: 210297

Answers (7)

user151323
user151323

Reputation: 

input[type="text"] {
  background: transparent;
  border: none;
}

Nobody will even know it's there.

Upvotes: 200

Mubramaj
Mubramaj

Reputation: 651

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;
}

Upvotes: 7

Caveman
Caveman

Reputation: 2955

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. :)

Upvotes: 0

derekshirk
derekshirk

Reputation: 187

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.

Upvotes: 0

bananasplitter
bananasplitter

Reputation: 19

I set the opacity to 0. This made it disappear but still function when you click on it.

Upvotes: 0

frank
frank

Reputation: 435

The two methods previously described are not enough today. I personnally use :

input[type="text"]{
    background-color: transparent;
    border: 0px;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width:5px;
    color:transparent;
    cursor:default;
}

It also removes the shadow set on some browsers, hide the text that could be input and make the cursor behave as if the input was not there.

You may want to set width to 0px also.

Upvotes: 10

user2985029
user2985029

Reputation:

I like to do this

input[type="text"]
{
    background: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
}

Setting the outline property to none stops the browser from highlighting the box when the cursor enters

Upvotes: 30

Related Questions