SitePoint Sponsor

User Tag List

Results 1 to 25 of 26

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded input text with image

    Hi,

    Can anyone give me an example of rounded input text using image?
    Regards,
    Jeff

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Could you say a bit more about what you mean? It's not clear (to me at least) what you mean by 'rounded input text'.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    It is a bit confusing. Do you mean something like this: http://imaginekitty.com/cssExamples/roundInput.html

  4. #4
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Your example is correct. But, is it possible if we dont use full image?
    just a normal input...but just play with the css only?

    Example:
    In html:

    <input class="class_name" name="input_name">

    In CSS:

    .class_name
    {
    --do rounded corners css with image
    }

    I know that in CSS3 there is a border-radius solution.
    But Im not using CSS3. And this is my only choice. Play with CSS.
    I will not use (div + input + div) in HTML. Just pure CSS.

    Is there any way?

    Regards,
    JEff

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's not really clear what you are asking here. The example linked above just uses CSS with a background image. Isn't that what you want?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it is what i want but it is not a full image...the above example has the
    fixed width of the input. Basically, i want to put a curve in left side and
    curve in the right side. And CSS3 only support that. Since, im not using CSS3, is it possible
    to do that playing in CSS only.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jep_657 View Post
    i want to put a curve in left side and curve in the right side ... is it possible to do that playing in CSS only.
    Yes, easy with CSS and background images. One way is to place the background images as generated content on the input via :before and :after. Could you provide a screen shot of the look you want?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Your attached image showed up but it doesn't show what we need. We need what you want it to look like not what it looks like now. You should be able to work with the technique I showed though. Give it a try.

  9. #9
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, thanks imaginekitty...i will give it a try...

    Regards,
    Jeff


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
  •