Rounded Corner Input Form
I was involved in a project for re-design a web page that required to create a rounded form. After googling, i did not find any satisfying result, more of them offer a mozilla CSS technique and its only working on Firefox and Mozilla (Gecko) Browser, so I try to make a simple rounded corner input form.
The idea is so simple, to put the rounded background behind the form, and make the <input> invisible by removing the border and adjusting the background. So what you see is only the rounded background, simple isn’t it?
Okay, lets get it on…
To make round a fixed width form, I put <input> into <div>.
<div class="rounded">
<input type="text" name="address" />
</div>Now, what you need is a rounded image with a view of css code. I made an image in transparent GIF below:
And the code:
input {
border: none;
background: #FFF;
width: 165px;
}
.rounded {
background: url(rounded.gif) no-repeat left top;
padding: 8px;
}
Look at the working Rounded Form Example. I know its a kind of a newbie thing couse I am a newbie anyway, Hope it’s usefull. Cheers…
newbie huh? mmm…
nice, pung.
next post will be rounded corner for any width ya? :D
Hehehe..kl bisa any width gw juga mau donk :D
@firman: I am…
@Deny, @Yogi: Udah nemu sih caranya, pake teknik “sliding door” gitu, tapi sialnya di IE ada masalah kalo kita ngisi teksnya lebih dari width yang ditentukan… dicari dulu solusinya…
Eh gimana yah klo bisa juga?
thanks we will publish this solution on out site.
There is an easier way:
input {
background:url(yourimagewithroundedcorners.png) no-repeat;
width:XXpx;
height:XXpx;
padding:XXpx; /* put a padding */
}
Truly, tomasz is right. Too many divs are not good, the simplest way is the best. But: thanks for the effort, it helped me!
@Tomasz, max: Yes, but unfortunately tomasz’s version is buggy under IE6, if you try to add text wider than the max charachter / box available, the background will scroll to left. I’ve tried this method before.
Thanks for the css info. The easiest way to make round corner: http://www.roundz.net/
How to make the same rounded corner text input with a span instead of a div?
want to fix IE6 buggy?
Try this-
_background-attachment : fixed;
Hello,
It’s the best, totally cross-browser method out there. Forget about using a background image for a text input – it causes a popular bug in IE6 (with a workaround – ‘position: fixed’) and IE7 (without any workaround, ‘fixed’ doesn’t do the trick any more).
So, thank you and have a successful year :)