Make input control invisible and keep input functionality

Question

I wonder, if I could make HTML FORM input controls invisible, while keeping their input text-editing functionality active.

Why? Because a designer created an image, which should be used as a form. The image make use of color gradients - all over and inside the form fields.

if you make it INVISIBLE then you won't even see the text they input...it's better to remove its border and to make its background transparent (on browsers where it's available) — Adriano Repetti
– Adriano Repetti, Commented Apr 7, 2013 at 20:29

Vucko · Accepted Answer · 2013-04-07 20:29:51Z

2

You can use

input{
    background:transparent;
    border:none;
    outline:none;
}

JSFiddle.

To keep input (text-editing) functionality and to hide it.

answered Apr 7, 2013 at 20:29

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aiias · Accepted Answer · 2013-04-07 20:29:42Z

1

You could try some styling like this for a textfield:

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

Note: Transparency does not work by default in IE6.

answered Apr 7, 2013 at 20:29

Aiias

4,7481 gold badge20 silver badges34 bronze badges

Collectives™ on Stack Overflow

Make input control invisible and keep input functionality

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related