#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    51
    Rep Power
    3

    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
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Hannover, Germany
    Posts
    11
    Rep Power
    0
    are you trying to do something like this:
    html Code:
    <input type="button" value="A Button" class="my_button" />


    and it showing the image?

    If so, you could archive that through CSS:

    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];
    }


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

    CSS Code:
     
    .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?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    51
    Rep Power
    3
    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


    Originally Posted by YellowBricks
    are you trying to do something like this:
    html Code:
    <input type="button" value="A Button" class="my_button" />


    and it showing the image?

    If so, you could archive that through CSS:

    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];
    }


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

    CSS Code:
     
    .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?
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Hannover, Germany
    Posts
    11
    Rep 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:
    <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:
    .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.

IMN logo majestic logo threadwatch logo seochat tools logo