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.