How can I create custom input fields on my forms?

[nexnexus]

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.

[ralph.m]

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.

[nexnexus]

textbox-example.png

Here is a rough idea of what I am looking for

[ralph.m]

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.

[nexnexus]

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

[ralph.m]

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.