SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  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,213
    Mentioned
    456 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'.

  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,213
    Mentioned
    456 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?

  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,213
    Mentioned
    456 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?

  8. #8
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im using IE... if im not wrong :before and :after is not supported by IE.

  9. #9
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    :before and :after is not required if you use the sliding doors technique which may require some additional markup. Maybe not.
    Quote Originally Posted by ralph.m View Post
    ... Could you provide a screen shot of the look you want?
    That would be nice.

  10. #10
    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)
    Quote Originally Posted by jep_657 View Post
    Im using IE... if im not wrong :before and :after is not supported by IE.
    Only in obsolete versions of IE (7 and under).

    Quote Originally Posted by imaginekitty View Post
    :before and :after is not required if you use the sliding doors technique which may require some additional markup.
    Yes, would normally require more markup, so I suggested :before/:after since the OP indicated a preference for no extra markup. But ultimately one can't be too picky.

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

    I attached the screenshot.
    In CSS:
    .INPUT_CLASS
    {
    background-color: #ffffff;
    color: #000000;
    font-size: 8pt;
    height: 18px;
    border:1px solid #800000;
    text-align: left;
    }

    In HTML:
    <input class="INPUT_CLASS" name="input_name">

  12. #12
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, hopefully you can help me with :before and :after in css.

  13. #13
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    ... Yes, would normally require more markup, so I suggested :before/:after since the OP indicated a preference for no extra markup. But ultimately one can't be too picky.
    OK, no extra markup here: http://imaginekitty.com/cssExamples/roundinput.2.html

    I couldn't view the attachment as it seems to be "Pending Approval" so I just went with my original purposely ugly images.

  14. #14
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyway, im using IE9...Is :before and :after still working in IE9?

  15. #15
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jep_657 View Post
    Anyway, im using IE9...Is :before and :after still working in IE9?
    You don't need it.

  16. #16
    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.

  17. #17
    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)
    Quote Originally Posted by imaginekitty View Post
    OK, no extra markup here ...
    Duh, silly me. I didn't notice that you have the left rounded corner on the label. Nice work.

    Quote Originally Posted by jep_657 View Post
    Anyway, im using IE9...Is :before and :after still working in IE9?
    Yes, it does work, but as imaginekitty is saying, you can use one bg image without extra markup.

    Your screen shot does not include rounded sides, which was part of the point of asking for a screen shot.

  18. #18
    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

  19. #19
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Duh, silly me. I didn't notice that you have the left rounded corner on the label. Nice work.
    Danke. Use what's there unless you can't and you usually can.

  20. #20
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I tried :before.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    p:before
    {
    content:"Read this -";
    }
    </style>
    </head>

    <body>
    <p>My name is Donald</p>
    <p>I live in Ducksburg</p>

    </body>
    </html>

    It is not working in IE9. Why?

    Jeff

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

    I use your http://imaginekitty.com/cssExamples/roundinput.2.html link as an example.
    You are using label. If you dont mind, can help me convert that using table, tr, td?

    In HTML:

    <form method="post">
    <table width="100%" align="center" border="1">
    <tr align="center">
    <td>Name</td>
    <td>
    <input type="Text" class="class_name" name="input_name">
    </td>
    </tr>
    <tr align="center">
    <td>Last Name</td>
    <td>
    <input type="Text" class="class_name" name="input_name01">
    </td>
    </tr>
    </table>
    </form>

    In CSS:
    ???

    Thanks...

  22. #22
    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)
    Quote Originally Posted by jep_657 View Post
    Hi,
    I tried :before.
    You'd need to position it absolutely, and give the input position relative and some left and right padding for locating the generated content.

    Quote Originally Posted by jep_657 View Post
    help me convert that using table, tr, td?
    Tables are not needed there, and not the right element to be laying out something like this. A table is only meant for tabular data, and it also involves more markup than you need. The <label> element is an essential form element, so it's not a good idea to leave it out, and it is just as good a hook for styling at a table cell, too. It would be harder to use the above approach with table cells.

  23. #23
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, basically using tables are not applicable for the example?

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

    Did you try this code?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    p:before
    {
    content:"Read this -";
    background-color:yellow;
    color:red;
    font-weight:bold;
    }
    </style>
    </head>

    <body>
    <p>test 1</p>
    <p>test 2</p>

    </body>
    </html>

    I think it is not working in IE9.Can you please give me the proper code for
    CSS on how to use the proper positioning between :before and <p>?

    Thanks

  25. #25
    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)
    Quote Originally Posted by jep_657 View Post
    Did you try this code?
    No, like I said, you need to position the before and after content absolutly and give the element itself position: relative.


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
  •