Change input box: input area with CSS/HTML

Question

So, I have a box that I want to use as my search box/input box. Although when I type on it, I can type on the whole image.

What I want to do, is to be only able to type in the white space of the image? Would I add padding to it?

This is my CSS:

input.searchbox {
background-color: #fff;
background:url(search.png) no-repeat;
width:250px;
height:41px;
border:none;
font-size:20px;
}

And here is my HTML:

<input type="text" class="searchbox" size="20" value="{Q}">

Also, how would I change the text size within the box?

d-_-b · Accepted Answer · 2012-11-18 03:15:57Z

1

your image is a background image. so the text will write over it if necessary.

try putting in a seperate image with some margin between that and the text.

answered Nov 18, 2012 at 3:15

d-_-b

23.2k43 gold badges174 silver badges291 bronze badges

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

3 Comments

LoganDeyo Over a year ago

So just add an image with maybe the background of the search box, and put the white space image on top of the other image?

d-_-b Over a year ago

without knowing what your image looks like, that sounds about right. a background image, as far as i know, does not interact with other elements. it's like a background color, it won't move out of the way for your text/element

LoganDeyo Over a year ago

So, dumb question here. How would I add put the input "image" onto the the background image? I'm sorry if that sounds stupid, I'm just not very fluent with CSS as of yet. I would just add the background image like you said, but how do I "line" it up on top of that background image with my input box?

Laywah · Accepted Answer · 2012-11-18 03:30:30Z

0

depending on your image (text location, what the text is) I used a table to hold the input (with image) and then in a seperate column had the submit button with a matching image next to it.

IMHO it really depends on the image that your using and how you are trying to match it up with the input field.

answered Nov 18, 2012 at 3:30

Laywah

941 silver badge11 bronze badges

Collectives™ on Stack Overflow

Change input box: input area with CSS/HTML

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related