SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    image for text field

    I have created a javascript that checks the user's input and gives an error if the input is invalid, but now I am trying to style the form fields giving it a better look, for instance, when a user types a wrong input the field highlights in yellow and once corrected it goes back to white.

    My problem at the moment is that I wanted to add 2 different images when the field is completed correctly the image is a positive check mark and when the input is incorrect the image is a negative check mark and is updated once the field is corrected or changed.

    I did manage to do it, as a field background on CSS but then the text runs behind it, is there a way to put this image as a border, but only on the right of the field, the image is 18px width and height I tried doing border-right-image but the image does not come up, and also I read that this will also not work in the old browsers, does anyone have a solution for this?

    this is an example of what I want to achieve


  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You could put 18px padding-right on the input and place the images as a background no-repeat 100% 0; which will place it far right.

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could put 18px padding-right on the input and place the images as a background no-repeat 100% 0; which will place it far right.
    I did what you said, although I might have done it wrong, but that does not even show the pic

    Code CSS:
    padding-right:18px;
    background:url('incorrect_field.png');
    background:no-repeat 100% 0;

  4. #4
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tlacaelelrl View Post
    I did what you said, although I might have done it wrong, but that does not even show the pic

    Code CSS:
    padding-right:18px;
    background:url('incorrect_field.png');
    background:no-repeat 100% 0;

    Sorry, my bad, I fixed it, what you gave me works just fine

    Thank you

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Glad it worked. You could simplify that CSS to

    Code:
    padding-right:18px;
    background:url('incorrect_field.png') no-repeat 100% 0;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •