Using an image as an input text

Question

Maybe this is an easy question, but I have been searching it for a long time and no luck. I simply need to use an image as an input type=text, instead of using the white box like normal. I tried to use background-image, but then the white is still there, only it has a background image. I don't need the white box. How can I do that?

How can it be a "text" input without the user being able to add text? If it is just an image, where do they type? — WreithKassan
– WreithKassan, Commented Jan 23, 2014 at 15:14
So you want a text box to have a background of an image instead of plain white? — stackErr
– stackErr, Commented Jan 23, 2014 at 15:14
I have just tried and setting a background image, and border:none makes the trick actually, what browser are you using to view it? or have you got an example of what you want? because maybe we are missing the point — aleation
– aleation, Commented Jan 23, 2014 at 15:19

Nick R · Accepted Answer · 2014-01-23 15:25:09Z

3

Like this:

HTML

<label for="test">Label here</label> <input type="text" name="test" id="test" placeholder="placeholder text" />

CSS

input[type=text] { background:url(http://placekitten.com/200/200) no-repeat 0 0; border:0 none; padding:4px 10px; color:#fff; }

JSFiddle Demo

answered Jan 23, 2014 at 15:25

Nick R

7,8142 gold badges24 silver badges33 bronze badges

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

2 Comments

ishwr Over a year ago

thanks! I just have to add the background color to transparent. thanks!

WreithKassan Over a year ago

+1 U was messing with the fiddle, and the issue was that you had 4px 4px at the end of the image url, which gave you a margin. By making it 0 0, Nick R made it fill the space.

SaturnsEye · Accepted Answer · 2014-01-23 15:19:28Z

Is this what you're after?

http://jsfiddle.net/HU8EE/

HTML

<div class="image">Text text text text text text text</div>

CSS

.image { width:400px; height:200px; background-image:url(http://3.bp.blogspot.com/-HX2iaDPwkhs/T6IEBoiufuI/AAAAAAAAAyQ/dtC9Sr268_k/s1600/doodle-525-cloud.jpg); }

What does that even mean? you can't just type on an image, you need create something to type over it.

badAdviceGuy · Accepted Answer · 2014-01-23 15:22:40Z

If I understand you correctly, this may be a solution. Applying a background image to a text input field: fiddle

html:

<textarea rows="10" cols="10" class="input">default text</textarea>

css:

.input { background-image: url(http://www.placehold.it/10x10); }

Collectives™ on Stack Overflow

Using an image as an input text

3 Answers 3

2 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Linked

Related