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…
I think this would benefit from changing the outline to none so when you click in it there isn’t a border inside the border.
input {
border: none;
outline: none;
background: #FFF;
width: 165px;
}
since this is an older post and i’m fairly new to development maybe this wasn’t the case back then so no knock on you and thanks for the info 🙂 I was going to csspie with a hosted cdn link for it but i’ll do this instead
Thanks! Lifesaver!
.input {
border: 1px solid #006;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
I would remove the “width: 165px;” property, otherwise all your checkboxes and radio buttons would also get this width.
Hello Olek,
i think your post, resolved my problem;-)
hm..try new css trick
“border-radius” for any width…but IS still suck on this CSS3.
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 🙂
want to fix IE6 buggy?
Try this-
_background-attachment : fixed;
How to make the same rounded corner text input with a span instead of a div?
Thanks for the css info. The easiest way to make round corner: http://www.roundz.net/
@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.
Truly, tomasz is right. Too many divs are not good, the simplest way is the best. But: thanks for the effort, it helped me!
There is an easier way:
input {
background:url(yourimagewithroundedcorners.png) no-repeat;
width:XXpx;
height:XXpx;
padding:XXpx; /* put a padding */
}
thanks we will publish this solution on out site.
Eh gimana yah klo bisa juga?
@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…
Hehehe..kl bisa any width gw juga mau donk 😀
nice, pung.
next post will be rounded corner for any width ya? 😀
newbie huh? mmm…