SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I create custom input fields on my forms?

    New to the site, but seems like there is a good community out there so here goes...

    Is there any way to create a curved input box using CSS, HTML, Javascript, or a combination of them? I am able to create curved corners, but was wondering if I can actually distort the box so it is not just a basic horizontal line? The form is sitting on top of a liquid metal bubble, and I wanted to give it the appearance it is floating on the surface of a curved object. If I can't create this effect with programming, could I use a custom image? If so, would there be any way to have the text input follow the shape of the object?

    I appreciate any help, and will definitely be using this site as a resource in the future.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi nexnexus. Welcome to SitePoint.

    You can easily create rounded corners on an input field with CSS. Sitting this over/aligning with a background image can be a bit messy, though. Ideally, place the background image on the input field itself. Or, depending on the bg image, perhaps you are better off just styling the input field to look like the image and not use the image at all. Perhaps post the bg image you are working with, or an image of the overall look you are shooting for.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    textbox-example.png

    Here is a rough idea of what I am looking for

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    O, I see. It may be possible to get the gray box to bend like that using advanced CSS3, but most browsers wouldn't support it anyhow. There are also very cumbersome CSS2 tricks to get something appraoching that, but it's not worth it, IMHO. As for the text, I don't think that's possible right now, unless perhaps you use something like HTML5 canvas ... which again is cutting edge and not widely supported.

    I think it's images all the way, or rethink your design.

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    already been rethinking the design - thanks for the responses tho

    is there any way to curve an entire division? I think I may use a standard box (with some minor tweaks) and an image outside the boxes to try and obtain the desired effect

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nexnexus View Post
    is there any way to curve an entire division?
    Not really, though you can make it appear so with CSS3—though it's not ready for prime time yet.

    I think I may use a standard box (with some minor tweaks) and an image outside the boxes
    I would suggest having the image as a background image inside the boxes. You can have boxes within boxes (with padding) if need be.


Tags for this Thread

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
  •