How do u place a rounded corner image on top of a imput field

Dev Shed Forums Sponsor:

October 4th, 2012, 06:10 AM

andreea115

Contributing User

Join Date: Apr 2012

Posts: 48

Time spent in forums: 10 h 2 m 36 sec
Reputation Power: 2

How do u place a rounded corner image on top of a imput field

Hi everyone

i am not sure if this is the right place to ask this.

i used Fireworks to draw an imput button for my login form ( i build it with rounded corners). i now want to tranfer this to my actual imput filed box on my site.

i now have two questions.

1 how do i place the imput image over the actual imput field; i mean, what is the best way to do it.

2. i want the imput filed to change colour once a mouse hovers over it. Is there anyway to do that in CSS or must it only be done in Jquery/javascript.

thanks for your help everyone.

warm regards

Andreea

October 5th, 2012, 03:09 PM

YellowBricks

Registered User

Join Date: Oct 2012

Location: Hannover, Germany

Posts: 11

Time spent in forums: 2 h 54 m 33 sec
Reputation Power: 0

are you trying to do something like this:

html Code:

Original - html Code
<input type="button" value="A Button" class="my_button" />

<input type="button" value="A Button" class="my_button" />

and it showing the image?

If so, you could archive that through CSS:

CSS Code:

Original - CSS Code
.my_button { background: url('path/to/image/file') center no-repeat; border: 0; padding: 0; width: [image width]; height: [image height]; line-height: [image height]; }

 
.my_button {
    background: url('path/to/image/file') center no-repeat;
    border: 0;
    padding: 0;
    width: [image width];
    height: [image height];
    line-height: [image height];
}

You could then easily add a :hover pseudo class to change the image to a hover state:

CSS Code:

Original - CSS Code
.my_button:hover { background: url('path/to/image/file_hover') center no-repeat; }

 
.my_button:hover {
    background: url('path/to/image/file_hover') center no-repeat;
}

This technique could be used for any type of element.
Is is this what you were trying to do?

October 6th, 2012, 01:37 AM

andreea115

Contributing User

Join Date: Apr 2012

Posts: 48

Time spent in forums: 10 h 2 m 36 sec
Reputation Power: 2

Hello everyone.

special thanks to YellowBricks for his responce.

i think that this pretty much asnwers my question.

i just have one further question.

the image that will be placed on top of the imput box i.e:

<input type="button" value="A Button" class="my_button" />

would it have to be two images. i.e the part that covers the top part of the imput button and then a part to cover the bottom part of the image.

if not, then how do you create an image that has an empty area in the middle of the image taht would enable user to type into it. ( you will note that imput fileds have an area in which users can type into it.

warm regards

Andreea

Quote:

Originally Posted by YellowBricks

are you trying to do something like this:

html Code:

Original - html Code
<input type="button" value="A Button" class="my_button" />

<input type="button" value="A Button" class="my_button" />

and it showing the image?

If so, you could archive that through CSS:

CSS Code:

Original - CSS Code
.my_button { background: url('path/to/image/file') center no-repeat; border: 0; padding: 0; width: [image width]; height: [image height]; line-height: [image height]; }

 
.my_button {
    background: url('path/to/image/file') center no-repeat;
    border: 0;
    padding: 0;
    width: [image width];
    height: [image height];
    line-height: [image height];
}

You could then easily add a :hover pseudo class to change the image to a hover state:

CSS Code:

Original - CSS Code
.my_button:hover { background: url('path/to/image/file_hover') center no-repeat; }

 
.my_button:hover {
    background: url('path/to/image/file_hover') center no-repeat;
}

This technique could be used for any type of element.
Is is this what you were trying to do?

October 6th, 2012, 05:45 AM

YellowBricks

Registered User

Join Date: Oct 2012

Location: Hannover, Germany

Posts: 11

Time spent in forums: 2 h 54 m 33 sec
Reputation Power: 0

If you want users to be able to type then you need an input field of type text (or password, email, etc.):

html Code:

Original - html Code
<input type="text" class="text_input" />

<input type="text" class="text_input" />

which you would then styled as before by targeting the .text_input class (or all <input>s; as you choose).

However, I would recommend recreating the image in CSS, if you can live with it not looking perfect in (older versions of) Internet Explorer (although there are also workarounds for that).
Gradients and rounded corners can easily be recreated in pure CSS:

(note, I am only using unprefixed version, google for support)

css Code:

Original - css Code
.text_input { background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); border-radius: 5px; }

.text_input {
    background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
    border-radius: 5px;
}

To easily create gradients in CSS, look at this awesome tool, which also spits out all the prefixed versions for easy copy and paste: http://www.colorzilla.com/gradient-editor/.

Just to sum things up:
There are different types of <input>s. In my first example I used a button, which is used for clicking. "text" for regular text inputs and "password" for "hiding" the users input.

How do u place a rounded corner image on top of a imput field

Developer Shed Advertisers and Affiliates