Transparent, borderless text input

Question

How can I remove the border around an <input type="text"> and make its background transparent?

score 53 · Accepted Answer · edited Sep 22 '13 at 14:47

53

Try this:

border: none;
border-color: transparent;

edited Sep 22 '13 at 14:47

Ry-

answered Aug 10 '10 at 08:49

Haim Evgi

score 22 · Answer 2 · answered Aug 07 '17 at 10:23

22

border: none transparent;
outline: none;

This will not only remove the border around the input field but also the orange highlight when the input is in focus.

answered Aug 07 '17 at 10:23

Sachin

1

+1 outline:none makes the border disappear even when the input is focused. Otherwise, border:none is not enough. – Vlad Mar 22 '18 at 05:30

score 17 · Answer 3 · edited Sep 22 '13 at 14:47

17

Like this:

input {
    border: none;
    background: transparent;
}

edited Sep 22 '13 at 14:47

Ry-

answered Aug 10 '10 at 08:51

SLaks

score 1 · Answer 4 · answered Sep 22 '13 at 14:36

1

Better late than never:

input {border-style:none;}

answered Sep 22 '13 at 14:36

user1032531

Better late than never, yes, but this just duplicates two existing answers (`border: none;` is shorthand for `border-style: none;`). – Ry- Sep 22 '13 at 14:48
@minitech Isn't border shorthand for border-width, border-style, and border-color? – user1032531 Sep 22 '13 at 15:02
Yes, and `border: none;` sets `border-style: none;`. – Ry- Sep 22 '13 at 15:04

4 Answers4