Lately I’ve been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers.
Round Circle Trick
You can create a round circle by specifying a very large value with the border-radius property. The following example uses 100px border-radius to make a round circle.
.circle {
width: 100px;
height: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
Inner Shadow Effect
Specifying inset values with the box-shadow property to create a inner shadow effect. As of now, this feature is only supported by Chrome 4+ and Firefox 3.5+.
.inset {
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}
Search Form Example
The following search form demo is created with CSS gradient, border-radius, and box-shadow with inset values (view the demo with Chrome 4+ or Firefox 3.5+). It degrades nicely in non-CSS3 browsers. View source code to learn the CSS code. If you are not familiar with CSS3, read my previous article The Basics of CSS3.
abhishek
That’s very nice idea of creating circle by utilizing radius feature.
I like it.
chux
Yep, it’s looking nice, but i hate to write two times the border (mozilla, and webkit), and IE, as usually, doesn’t work. I hope we can use css3 features in real world soon.
Taseer uddin
That’s very nice idea of creating circle
I like it.
Digital Showcase
Wow. What a great tutorial.Css3 is really taking over!
Jaina
So simple and looks lovely. Really making it easier to make websites look stunning without an overload of images for backgrounds and the like!
Markus
love it ;)
but I think we can use it only in 1-2 years
James
That’s not displaying well for me (On Chrome). The ‘Go’ is not centred and the text box has a square outline…
Rob
This actually doesn’t look half bad in IE 8, everything is just squared. Looks horrible in Chrome, and a little off in Safari, though. It’s not too effective of a technique if it only works properly in one browser – that’s exactly what we’re trying to get away from!
ximi
Actually, the inset-version of the box-shadow only works in Firefox. Unfortunatey no other browser displays it properly.
Jeroen
I noticed in Opera (latest snapshot) that the button wasn’t round, you should add border-radius there too.
.searchform .searchbutton {
...
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
...
}
Iwani
Hi Nick,
This is a wonderful trick :) Btw, I have some thoughts on why it doesn’t work very well on Chrome win, but don’t kill me if I’m wrong hahaha! Wanted to DM this actually but couldn’t
Firstly, this is how it looks like on Chrome windows (http://bit.ly/bzfjFc)
I did my own test on a box without rounded-corners, and no problems with -webkit-box-shadow, so I’m assuming the grey-box appears around the rounded input because -webkit-box-shadow thinks its a rectangular box so the offset area is displayed in grey
BertieB
Yeah, there are similar problems to Chrome displaying in Iron unsurprisingly:
BertieB
Well, the preview showed an image displaying, guess it lied. See http://img94.imageshack.us/i/boxux.jpg/ for the effect.
Pavel Kuts
Ok, so this dosesn’t degrade that nicely. It does in IE6&7, which is cool and all. But i have this question – would you leave this peace of code like that when developing a real site, for a real client, with real money and needs/expectations.
I guess, no.
… but that’s only a guess …
Jordan Walker
Nice tutorial.
Fernando Cordeiro
Very nice post, in my firefox that’s look’s perfect!
But hey! Is possible optimize your code using new technics of HTML5 for inputs.
The “Placeholder” attribute will kick of our “onclick” functions.
– input class=”searchfield” type=”text” placeholder=”Type Here”
I tested that with your code and worked well on Chrome. Try! I think that’s a nice “plus” for this post.
See more of “new features for inputs”, here: http://307.to/jLi
The future of web will be great, I’m very happy with that!
Hugs! :)
Tiffany
It does look great, however, in Chrome Mac.
Mr.Reku
On Google Chrome the problem seems to be the “inset” instruction on
” -webkit-box-shadow “.
If you remove ” -webkit-box-shadow “, grey corners are no longer displayed.
Iwani
@Mr.Reku – if you remove that, it’ll beat the purpose of this tutorial. We need the shadow.. but what’s strange is that, it works on Chrome mac but not on win lol
Btw Nick, another bug I discovered. On Safari win, -webkit-box-shadow is ignored completely – check the screen http://bit.ly/bM21bo
Guy At HockeyBias dot com
Beautiful – when it works!
Patrick H. Lauke
Nice. If you add “border-radius: 2em;” to “.searchform .searchbutton”, the button will be round in Opera as well (though currently there’s no CSS gradient support, but at least it’ll look nicer than the big square you get at the moment).
party
It’s not so beautiful on Chrome 5 beta.
Website Design
CSS3 makes our lives easier…
also worth looking into rounded corners!
Graham
Great tutorial, Thanks for sharing it.
I really need to go and give it a try.
Nicole Foster
Very nice CSS3 search form. I’ll have to apply that to the next search form I design. Also, I’m happy that it degrades gracefully. A lot of CS3-driven features degrade ungracefully, so this a relief.
Liam
@Pavel Kuts: Why not? Working using progressive enhancement is perfectly fine if you have explained it to your client and they are ok with it.
I can’t think how a shadow or a rounded corner will break the usability of a site.
SolidSlug
It’s a beautiful style and I commend you for discovering it.
But, the fact that we still need a page of CSS to achieve something this trivial boggles my mind.
CSS3 or not, I don’t think we are making a lot of progress.
dattai
That’s cool !
Thanks alot
User Friendly Web Design
Wow, that IS beautiful! I never thought it would degrade so gracefully. Time to get on the css3 bandwagon!
Pragmatic Design
CSS3 is fantastic at allowing us to very quickly create great-looking websites without resorting to Photoshop for dropshadows, gradients etc. It’s just a shame we still have to cater for those using Internet Explorer 6 too!
webdesign
wow, amazing css tips/tricks, thanks for sharing!!
Deluxe Blog Tips
Cool. The circle trick is very impressive. Thanks for sharing this for us.
Chris Stalnaker
Like most everything else in web design and development, by the time CSS3 is truly crossbowser friendly, the focus will be on CSS4 and HTML6. Hmmm…maybe I should look at the bright side?
The more confusing it is to the inexperienced the better..right? It does creates a little job security for the designer/developers that take the time to learn the hacks.
Gabri
Nice article , but in safari the go button is unclickable
Christopher Carlsson
Hi Andrew!
Just wanted to tell you that it doesn’t really work in Chrome 5.0.375. Here’s a screenshot of the problem. This is in Windows btw!
http://img440.imageshack.us/img440/6431/wdwbug.jpg
Rutger
Nice!!
TheAL
Looks nice. Can’t wait til CSS3 is widely accepted. Til then it feels like all the HTML5/CSS3 tutorials exploding everywhere are a total tease! Also, and don’t shoot me for this, but a lot of talk here discusses making sure stuff degrades nicely for IE6. IE6? I stopped supporting it. Enough is enough. Feed it and it’ll just linger. Starve it and it’ll die of!
Dylan
In Chrome 4.1.249.1064 (45376) there is still box corners near the input.
Chris Coyier
Beautiful demo Nick!
Quick note on the CSS for the border radius… The border radius would only need to be 50px for an element with a height and width of 100px to make a perfect circle. Overshooting it like that will generally work and will “stop” at a perfect circle, but there were version of WebKit that borked it and just gave up and make square corners. Opera will also bork it if you overshoot it I think.
Dan Siteroom
The circle trick reminds me of primary school. We had a very basic plotting program called ‘Logo’. Our teacher would challenge us to try to guess what the commands might be for various shapes, and a circle was the elusive shape we all wanted to create. One day I simply typed something like “fwd 1, right 1, repeat” and it drew a circle. My teacher wasn’t impressed; he wanted us to use the correct command, which turned out to be ‘arc’. Pah! Needless to say, I like your circle trick! Oh, and great search form, thanks
Danny Dyson
Thank you so much.. This was exactly what I was looking for my blog design: thedailyguitar.com. I’ll try setting up this search bar tonight.
Calvin Tennant
Very nice, I must say.
maya
Oh great. I will try it.
Sachin
I liked the search form example very much ..thanks…
CMS Themes
Great tuts! Too bad there’s still some browsers doesn’t support CSS3 rounded corners
Rajib Roy
Oh great. I will try it.
Sanchit
Good, but if it doesnt work in IE, its not worth yet.
What the hell guys at Microsoft are doing with their Browsers..
Lazy.
devlim
even if microsoft update their browser, nothing will change, coz people and even government still stick with lousy ie6
Catalin Red
Nice example, the search form looks really cool!
bruce lawson
Nice tutorial, could use a little extra to make it cross browser.
Opera and IE9 preview edition support border-radius without the vendor prefix (as that’s now a stable part of the spec). It’s in the code for the demo but not in the sample above.
Opera supports inset box shadows.
digof
nice but still not very much useful because of IE:(
Bert de Graaff
Very nice… it works in Firefox, but works half in Google Chrome Linux 5.0.375.38 beta. It shows the round circle, but not the box for the searchtext
lorenz068
Curves not good in chrome/xp…
Tom Walters
Nice, but you should also add border-radius on its own to the CSS to support future browsers such as IE9.
Felix
Does not work good in Chrome :-/
Web Design
Done this style plenty of times before, never with pure CSS. Great, informative post.
Jason
I think the fact that it degrades so nicely means that you can use it with IE8-…sure you lose the rounded corners, but we ARE talking about degradation, here.
I will say that Chrome 4.1.x gets a little weird when the shadow is applied to the search box, but still – great job of getting us thinking about this idea!
John
It doesn’t work very well on Chrome
Jerome Eteve
Nice one! You can also remove the ‘width’ CSS attribute of the button, so it adapts nicely to the text value.
David Smith
Great work Nick. I really love the style and the fact that it degrades nicely means that it *IS* a practical solution people can use today.
Comments above are correct that on Chrome 4 (Windows) the rendering isn’t quite right. However, I’m sure this could be fixed with a bit of work.
Keep producing stuff like this, it’s really great!
All the best
Mark James
Great stuff. Not quite correct in Chrome, but I’m sure with a few tweaks it can be sorted. Will definately take a look at this for a future project! Many Thanks.
nikos lianeris
Great job!I use Firefox and it looks pretty cool!! :)
Fred
Wow this is so simple and it looks so nice. Thanks for the tip :)
Galen777
Probably a little petty, but isn’t a round circle a bit of a tautology? Otherwise great work ;)
Jay
CSS 3 depresses me. Maybe because we are stuck on IE 7 at work.
Galen777
Jay, you’re gonna make me cry. Download the latest version of firefox from the mozilla website and get cracking. CSS is the most fun you can have with yer clothes on. It’ll put a smile on your face that will make people wonder what you’ve been up to… Failing that, get another job. ;)
ss
<img src=”http://www.maniactive.com/backgrounds/quote-me.jpg”
Nik
beautiful, though on Chrome 6 the rounded-corners just outside of the typing area are squared
Zequez
For a 100x100px square, 50px border-radius it’s enough.
ewallpaperstock
very cool tutorial and i love CSS standards :)
Kaye Media
That is really nice, I will have to implement that into my own site!
Web Design Seo
This is really nice css form, thank you!
Kay
Viewing this in Google Chrome, doesn’t look too good :(
Design Ideas
Really nice post, i’ve added a css3 search form that is very similar to this on my football memorabilia site. Great work
Cameron
Nice! I think it would be even cooler if you switched the gradient on the button when it’s pressed (active) or even just when it’s moused over (hover). It would even stay with the pure css. I’m just getting into web development and am always frustrated when IE refused to comply.
cesar
wow, I love the search box effect. Will definitely use it!
loethen
wow,css3 is big strong, beautiful effect ! i like it.
HozZzLi
Wow…we don’t need backgroud-image right?
junemarkm
Thanks for posting your ideas and shared to us.
Webdesign
This is really nice css form, thank you!
Mimi
Will it be standards compliant though? That’s what I worry about. If it doesn’t look the same in all browsers as well I won’t use it until it is implemented into the majority of them. I’d rather not rely on too many little tricks like this if I can absolutely help it.
Santosh
Hi there…
You have a very Good website and OMG its so beautiful..
I have a question….
Can you tell me how did you designed your collapsible comment box..
I really like this.I want the same effect for my wordpress tooo..
Will you have a look at
They have sliding questions in there post how to do that…
Daniel Lemes
What a fantastic layout you’ve done here, congratulations! It’s been a great inspiration to me. Despite the fact some css3 effects doesn’t work on IE (i really don’t care, to be honest), i’ll use this style of search box. Thanks for show us.
Auré
So nice, very detailed…
Thanks for sharing :)
Anna
nice search that will work for browsers that support CSS3 and also it would like ok in those that don’t…web design gets more exciting with CSS3 :) thanks for sharing!
resominator
sorry to say this, but Chrome does NOT work out well.
Web Design
Nice sharing, thanks mate!
pattaya
So nice, very detailed…
Thanks for sharing
anandasama
Doesn’t work in Chrome.
web2besocial
Hey guy it looks pretty cool in your preview, but unfortunately it doesn’t work in IE8! I cant understand why the developer from IE takin` so much time to fix it!?
Fritz
It’s the
box-shadow: inset …
that breaks it in Google Chrome.
Just delete the line
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
and it’s fine in Chrome.
… and don’t bother about IE. It’s broken anyway!
Design Hippo
Lovely search form. Come on you IE lot. Pull your finger out so we can make the internet a better place
Matt
If I am making a portfolio, is it better to just make it with CSS3 and say “best viewed in Firefox” and force everyone to use Firefox?
Or best to code for all browsers to look the same,even if it means extra images/for IE and Safari etc..??
Georgia
It works fine in Safari also. Nice written article.
Guillermo
cool trick! css 3 rocks!
George Lucas
Thanks! A few bugs in chrome otherwise i would have swapped for the search bar here!
Thanks again!
IFx
Hi,
try to have a look at this nice solution for rounded/curved corners (IE6 to IE 8):
http://code.google.com/p/curved-corner/
Darkened Soul
Great stuff, css3 is really going round the web lately, all preparing for the big shift, html5 n css3, upgrade those skills!
Mike
Beautiful. Can’t wait for CSS3.
Gravity
That turned out BEAUTIFUL for me… Using it for my blog! awesome!
Elizabeth Kaylene
@Matt: Personally, I think it’s better to use the current standard, rather than trying to force people to look at your site in FF. There are still a lot of companies that use IE — and really old versions of IE, believe me — who will need to see your portfolio the way you intend. I’m holding out on using any of the new CSS or HTML properties until they’re more widely supported; I wouldn’t want to create a site for a client that any potential clients might not be able to see. You could argue that it’d still look decent in IE, but I like my sites to look the same across all browsers and platforms. Call me old school, but it can’t be hurting me, considering business is pretty good.
Best wishes to you on your portfolio! Right now is a great time to start a business in this field. (:
Arif
Worth it… lovely :)
Olivo
There is still debate about using CSS3 or not.
I would say that CSS3 is just another updated, its depends on us—the web community—to make it more familiar in our code, the earlier we start the sooner these browser will updated their databases so that they can show these new beautiful looking websites. Because in the end browser fight is still on. :)
Our community must take advantage of this fight, and use latest technologies and force these browser companies to upgrade their systems. :)
Olivo (www.greenolivz.com)
Parind Shah
Whats the necessary to use CSS3?
Jared @ Saskatoon Web Design
Very cool, can’t wait until ie 9 comes out and css becomes the norm.
yohan
thanks for the tutorial :)
David
Very cool! Is it weird that I prefer the Non-CSS3 look?
chai
css become more powerfull for design website… i will looking forward to it
Software Development India
We Soniktechnologies Specializes in Website Designing, Website Development, Search Engine Optimization, Multimedia Flash Presentation, Template Designing, Brochure Designing, Website Redevelopment or Website Redesigning, Web development, Web designing, Email Marketing, Website Hosting, Portals. For more information contacts us our live support is online 7 days 24 hours. Effective.
Geoff Ellis
Go example of solid css3. I like how you’ve shown the IE version – very bullet-proof.
ikilobo
nice post..i’ll try it
ikilobo
nice post..good
Gina
good post, very inspired to me! thanks~~!
Sashi
Very good blog and it’s really a web designer’s wall. This blog is very clear and eye cool to read, all articles are outstanding. Usability wise perfect, design wise also. Thanks for the good works. Thanks for all free stuffs. Thanks to inspire us.
Umapathi
i tried ., very gud creativity
Dan
Nice tutorial, used it on one of my sites!
san
nice,,,very beautiful
Php2ranjan
it very nice post.
grate idea … thanks..
Shane
Great post, can’t wait to try these out!!
Cheers!!
Mike J
While Opera doesn’t support CSS Gradient, you can use inner box shadow to get a similar effect. For example, adding a simple declaration for the search button:
box-shadow: inset 0 20px 20px -10px rgba( 255, 255, 255, 0.3 );
That should give a semi-transparent white “gradient” style effect. I have difficulty recommending gradients personally. While there are many things that could be made wonderfully possible with it ( and with adoption of text-stroke ), it currently has fairly different implementations between webkit and mozilla.
Scott
Doesn’t look good with chrome
fajar
trims infonya
code pixelz media
very good. I like the way you present your content.
ridwan
so beautifful
Dave
Are you getting weird issues on the radi in Chrome? it’s not rounding it and making these ugly square corners. Have you see this happen?
great technique! Thanks so much. I tested it in Safari and FF.
Dave
Just too clarify, i only get the issue on the search field. the rest seems to work just fine.
yohan
nice info, thanks for sharing :)
Kojeje
Wow, it is beautiful indeed :)
doris
so beautifful
Web Dizajn Design21th
very cool!
kai
wowh… i wanna try it… it’s nice trick
Ian
I tried using the inset shadow and it comes out flawless in FireFox but for some reason in Chrome it does something very odd. The borders render round because of border-radius, but the shadow doesn’t. It renders with 4 sharp corners around the round corners of the field anyone have any insight on if this can be fixed?
GuKe
very cool,i love it !
Adriaan Fenwick
Very cool technique, thanks for sharing it.
I get the same issue as @Dave on Google Chrome (5.0.375.99)
Freelance Portal
http://www.freelanceportal.8rf.org
Work From home: Homebased website design jobs, web developers,graphic animation, SEO, CMS templates, blogger themes, article writers, Joomla, wordpress, API programmers, ASP, XML, PHP programming projects. XXX video blogging, ebay sellers and online IT support.
Cheatsheets and online tutorial.
http://www.freelanceportal.vze.com
azman
great, i like it
Madhyam Technology
oasam designs.
Madyam Technologies, India based web company offering affordable web
design services to its clients, serves an eye-catching and crispy layouts. Also offer
flash animation and logo designing and SEO,Shopping Cart Development,ERP,CMS,CRM
Services etc.
hellonearthis
Nice one.
To add accessibility, after the form is defines add a label statement.
[label style=”visibility: hidden; font-size:0%” for=”search”>Search this site[/label>
[ brackets added to for blog post. and should be <‘s
note visibility is hidded, and font size is 0%. That makes it look no different from the norm but blind people can read it using jaws.
ltmylinh
So great. It’s very useful. Thanks so much!
Rik
To be honest, I like the non-CSS3 examplebetter…
The CSS3 one is a bit too round for me, but that doesn’t take away that CSS3 is freaking awesome.
bob
Great Post Here,
Please by my services for i am a crispy indian man who sells his body to women to pleasure.
i post crap like this on peoples site to get some seo and design work. what a loser. “Madyam Technologies, India based web company offering affordable web
design services to its clients, serves an eye-catching and crispy layouts. Also offer
flash animation and logo designing and SEO,Shopping Cart Development,ERP,CMS,CRM
Services etc.
”
i like to be crispy too – get a life homo
ospop shoes shop
Great post, can’t wait to try these out!!
Grace Yoon
Thanks so much. It’s very useful!
Dion
Suprab…!!
Melvins
A nice post shared by you with us. It makes me smile and very useful in future.
Los Angeles Web Design
Pedro Luz
beautifull, just beautifull. thanks
Terry Reilly
This is just what I was looking for. thanks
Mark Johnson
Really nice,I like that round corner look.
Tahsin Hasan
Hello,
thanks for the post. you can find more discussion on web techniques on tahSin’s gaRage
Steve
even better, add this css:
input[type=text]:focus {
background-color: #ff4;
}
suresh patel
this is not working
Jarod Billingslea
that’s a pretty minimal-styled search form!
Brett Widmann
This is a great tutorial. Thanks for sharing.
James
This is great!! Thank you, it is just what I was looking for to add to by new blog theme.
palanivel
super………….. Thank u sir………..
asd
super! thanks
Henry Peise
iphone 4 white and iphone 4 black, which one will be more suitable for yourself? Thinking of the black iphone 4 is too ordinary, iphone 4 white will be the one to make you feel different.
Juno Mindoes
As the Apple iphone 4 bumper is taken off the marke, will white iphone 4 available soon?
oky
that’s great…. it’s cool…
mikwillson
That is to be expected in a long-term, high-risk project like ours. So, we turned to the blogging community for help – and got it! We have published our problems, and the community responded with results!cheap ugg boots
Uçak Bileti
acaba kv nin özeti çıktımı
Ben
Thank you for everything!!!
tütüne son
This is great!! Thank you, it is just what I was looking for to add to by new blog theme.
Cluehunt
It would seem that this CSS3 is an art work in it;s own form. How ever one must remember that it’s only good in the form mat of CSS3 and does not display the same way in other browsers. Just take that in to account when using this software.
formula 21
super! thanks
altın çilek
Thanks !!! Very usefull !!
hcg damla
that’s great…. it’s cool…
romadur
That is to be expected in a long-term, high-risk project like ours. So, we turned to the blogging community for help – and got it! We have published our problems, and the community responded with results
moliva
that’s great…. it’s cool…
luis
NICE, THANKS
joN
Beautiful CSS3 Search Form:
looks great in firefox 4 beta.
Google Chrome webkit [standalone version] does not render it well ver.9.0
Nice website and info dude.
joN
Hi,
I modified the code slightly: now it renders correctly in Google Chrome.
from
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
to
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
joN
Box-shadow and border-radius bug in Chrome
Finally got to the root of the problem.. sorry for all the posts.
removing the inset also removes the cool drop shadow. apparently there is a known bug in chrome.
keylogger
super! thanks to you
Jessica
I am using Firefox stable and this CSS3 Search Form looks great in it. I love the design of this blog as well. It is very visually captivating. I’ve been utilizing the capabilities of CSS3 to give a better feel to my rapid prototypes company website.
babar
hi here is babar from pakistan when i got these tricks i am feeling comfortable now? its great and u are doing fantastic job for whole world thanks
รับทำเว็บไซต์
Awesome! I can’t wait to give this a try!
Nils
Gorgeous. Thanks for sharing this. You rock.
How To Get Taller | How To Put On A Condom
I agree, it indeed displays perfectly in CSS3 browsers. Thank you.
How To Put On A Condom | How To Get Taller
It does degrade gracefully in non-CSS3 browsers too. Thanks.
Pincus
It does not work on IE9
Pete Nicholls
That’s a feature.
JET
hell yeah
Tomas Lyngen
To use border-radius in IE9 you will need to define all four corners.
Example:
border-radius: 100px 100px 100px 100px;
Note that the prefix: “-moz-” and ” -webkit-” are for Mozilla Firefox, and Google Chrome and Safari respectably. By using the prefix it will not work in IE or Opera (Opera uses the prefix -o-).
Alan van Buuren
Nothing works on IE9
Grashnu
Yes, the W3C standard (border-radius) works on IE9. FYI -moz and -webkit extentions are non standard proprietary extentions, the same kind as IE5 was full of.
Prakash Thapa
some strange borders displays on Google Chrome.
Husein Yuseinov
I confirm, i see the same borders in Chrome!
The zach
Do you mean the outline?
You can fix it with outline:none;
dexx
Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.
Don
Really like your tutorial. How would you do this to customize a Google Custom Search form?
Thanks again.
toenail removal fungus
Pretty component to content. I just stumbled upon your site and in accession capital to claim that I get actually enjoyed account your weblog posts. Anyway I will be subscribing for your feeds and even I achievement you get entry to constantly rapidly.
IBCBET
That was a some strange borders displays on Google Chrome.
guaranteed car finance
Attractive section of content. I just stumbled upon your website and in accession capital to assert that I get in fact enjoyed account your blog articles. Anyway I’ll be subscribing to your augment and even I achievement you access consistently rapidly.
SEO
Thank you for that very interesting.
orhanbt
This is verry good
Dizzledorf
Looks great on FF & Chrome, but bad on IE9.
Dave
+1 for looks fine in all modern browsers except ie9 which bungles the area around the circle and the text is not centered.
Surendhar V
Looks good for me in Ff,Chrome and IE 9. But how to include search icon inside the box itself ?
Sheds Yorkshire
Howdy! This is my 1st comment here so I just wanted to give a quick shout out and tell you I truly enjoy reading your blog posts. Can you suggest any other blogs/websites/forums that go over the same subjects? Thank you!
xbox 360
This is the content very useful.
Akvichop
I see really strange borders in Chrome…
Steve @ Signature Web Marketing Works
We love CSS, Ajax and jQuery in equal measure. Along with Cufon it unchained us from dreaded tables, Arial and useability. Contact forms is the first point of contact for most websites so tuts like this are really useful. Thanks for sharing
Car Finance For People With Bad Credit
Love the search form demo! really helpful tutorial, thanks v much!
วิธีลง App iPhone
how to install app iphone 4
packaging machines
Great looking search form!
Small Dog Breeds
hello my friend, nice to meet you, visit is my website if interest Small Dog Breeds, welcome to site.
bface
so it looks great – but how do i make it search , am i missing something? :(
nick
dude learn php
Dan
@bface you’ll need some form of searching capabilities added to the form using either ajax or php or any other form of dynamic solution.
Terry Lawton
Nice post. I found this blog with withbest practices for creating a search form that is quick and easy to use
http://blog.caspio.com/web-database/7-tips-for-creating-user-friendly-search-forms/
Nick Lachey
Nice post. I found this blog with withbest practices for creating a search form that is quick and easy to use http://blog.caspio.com/web-database/7-tips-for-creating-user-friendly-search-forms/
Mick
I think bface might be talking about the searchbutton not working when clicking it.
For me the search button didn’t work when using the mouse either.
in the html section change type=”button” to type=”submit”
also i added in the css class .searchbutton
cursor: pointer;
thanks for the article it was awesome.
spring valley vitamins
definitely, a BIG BIG deals.thx, for article
MSG
Nice one chap will look to implement asap. I like your header too…awesome!
Harkoonen
Great idea!!! Thanks
DJDeals.com
We LOVE the look of this, but when implemented, it doesn’t display correctly in IE. It makes the GO button into a square, around the circle, and looks terrible. We also noticed that on an iphone, the word GO is not aligned in the center of the circle.
Any help with resolving those 2 issues would be welcomed!
See our site for an example…
Reklama
Nice post. I found this blog with withbest practices for creating a search form that is quick and easy to use
Sushi
can u upload the source ?
Dogneto
nice tutorial.. but if u can give us the download source code its better
Alex Ron
Hi,
Can you please provide the source code for it to download. Very Nice Search box, i would like to intergrate it onto my website, also how can i use different images for search button to look stand out.
thanks
Alex
Realizzazione siti web Salerno
Nice tutorial. Thanks.
Mohammed Uddin
I have an article on my website that shows you to create form from scratch like how to put image instead of word go. I also tell you how to get the form to work. http://www.cyberfanatic.com/pages/snippets/html/google-custom-cse.php
Dont let the link fool you even though the link says google custom cse dont worry about that. I use google to process the search query and display results. Just visit the link. Two minutes and you”ll be like why didnt i know about this before
Lincoln
Por favor, poderia me enviar por e-mail o código fonte do formulário com bordas arredondadas? Obrigado!!!
model
This does look like a great theme.t
skyline
wow thanks for the tutorial, this is usefull for me..
click
Have you considered adding a few social bookmarking buttons to these sites. At least for twitter.
Alicia
Nice! I’ll try using this for my new site, http://www.doodlingpandas.com . Excited to try your method!
Taseer uddin
That’s very nice idea of creating circle by utilizing radius feature.
I like it.
johanso
is very good, creative things to do in html and css3, excellent
Maria Steaphen
Nice post about html and css3, its very excellent. And thanks for sharing this..,,.
asd
asd
asdasd
asdasdasd
asdasd
what
Dan
Really cool, although the button needs a hover state, active state and ideally a spinner on click, I’m just adding this now :)
Tech Support Guy
Great write up. Our website is getting a bit large and unfortunately its time for a search box…..just not sure how its going to fit into the design. Thx again.
walif
nice and attractive design code.
ao cuoi
tks for sharing!!!
fauzi
Thanks, awesome tutorial.
Afzal
hey
Your post is just awesome :)
It is so informative :)
Thanks for sharing :)
shut off power
Hiya very nice web site!! Man .. Beautiful ..
Wonderful .. I will bookmark your website and take
the feeds also?I am satisfied to seek out a lot of useful info here in the put up,
we want develop extra strategies in this regard, thanks for sharing.
MIMRAN
But How can i add this code to my site