trasparent text field but text value shows?

Question

How could I have a transparent background in text field but I want the text inside the vale="" to show? is that possible

Here is my code HTML

<input type="text" name="firstname" required class="form-control" maxlength="150" value="first name">

CSS

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

Any help please

[Seems working](http://jsbin.com/rafoj/1/edit) to me. Tested on Chrome 33 — Hashem Qolami, Mar 18 '14 at 22:39
I want the Value="first name" inside the text field to show , so everything trasparent but first name shows up — user3150060, Mar 18 '14 at 22:40
are you looking for placeholder attribute ? http://codepen.io/anon/pen/HahDk/ — G-Cyrillus, Mar 18 '14 at 22:45

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

I had a similiar problem but you can solve it by making a separate blank division and use it to put the text on. If you don't want to do that, you could create a semi transparent png image to use as background.

Link to identical question How do I give text or an image a transparent background using CSS?

edited May 23 '17 at 12:27

Community

1
1

answered Mar 18 '14 at 22:43

mayikillyou

3
5

score 0 · Answer 2 · answered Mar 18 '14 at 22:47

0

Try this:

input {
background-color: rgba(0,0,0,0.01);
border: none;
}

among other parameters. rgba() with last parameter 0.01 will make your iput completely transparent, border: none removes default border

answered Mar 18 '14 at 22:47

Marek Galinski

435
1
5
16

What's the point of using `rgba()` color in this case? Whereas `transparent` value is supported in IE6 and above. – Hashem Qolami Mar 18 '14 at 22:52
transparent did not worked for me in all browsers (maybe my fault). `rgba()` is the solution i tested and it worked for me, as i was trying to find alternative to given `transparent` solution – Marek Galinski Mar 18 '14 at 22:54
`rgba()` has been introduced by CSS Level 3 and it works on IE9+ However this is not the case as the OP said transparent background is working but the text is not showed up. Unless I misunderstood the question. – Hashem Qolami Mar 18 '14 at 22:57
Okay I understood the question as "how can I have transparent background with ...", so maybe my fault. – Marek Galinski Mar 18 '14 at 22:59

trasparent text field but text value shows?

2 Answers2