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.

View Demo Search Form

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;
}

circle

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);
}

box shadow inset

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.

search form

242 Comments

abhishek
May 12, 2010 at 6:09 am

That’s very nice idea of creating circle by utilizing radius feature.
I like it.

chux
May 12, 2010 at 6:15 am

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
Jun 20, 2012 at 5:06 am

That’s very nice idea of creating circle
I like it.

Digital Showcase
May 12, 2010 at 6:24 am

Wow. What a great tutorial.Css3 is really taking over!

Jaina
May 12, 2010 at 6:24 am

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
May 12, 2010 at 6:49 am

love it ;)
but I think we can use it only in 1-2 years

James
May 12, 2010 at 7:17 am

That’s not displaying well for me (On Chrome). The ‘Go’ is not centred and the text box has a square outline…

Rob
May 12, 2010 at 7:33 am

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
May 12, 2010 at 7:43 am

Actually, the inset-version of the box-shadow only works in Firefox. Unfortunatey no other browser displays it properly.

Jeroen
May 12, 2010 at 7:44 am

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
May 12, 2010 at 7:55 am

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
May 12, 2010 at 8:05 am

Yeah, there are similar problems to Chrome displaying in Iron unsurprisingly:

BertieB
May 12, 2010 at 8:07 am

Well, the preview showed an image displaying, guess it lied. See http://img94.imageshack.us/i/boxux.jpg/ for the effect.

Pavel Kuts
May 12, 2010 at 8:21 am

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
May 12, 2010 at 8:26 am

Nice tutorial.

Fernando Cordeiro
May 12, 2010 at 8:33 am

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
May 12, 2010 at 8:35 am

It does look great, however, in Chrome Mac.

Mr.Reku
May 12, 2010 at 8:37 am

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
May 12, 2010 at 8:48 am

@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
May 12, 2010 at 9:05 am

Beautiful – when it works!

Patrick H. Lauke
May 12, 2010 at 9:16 am

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
May 12, 2010 at 9:23 am

It’s not so beautiful on Chrome 5 beta.

Website Design
May 12, 2010 at 9:30 am

CSS3 makes our lives easier…

also worth looking into rounded corners!

Graham
May 12, 2010 at 9:33 am

Great tutorial, Thanks for sharing it.
I really need to go and give it a try.

Nicole Foster
May 12, 2010 at 9:39 am

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
May 12, 2010 at 9:45 am

@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
May 12, 2010 at 9:52 am

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
May 12, 2010 at 9:52 am

That’s cool !

Thanks alot

User Friendly Web Design
May 12, 2010 at 11:40 am

Wow, that IS beautiful! I never thought it would degrade so gracefully. Time to get on the css3 bandwagon!

Pragmatic Design
May 12, 2010 at 12:22 pm

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
May 12, 2010 at 12:22 pm

wow, amazing css tips/tricks, thanks for sharing!!

Deluxe Blog Tips
May 12, 2010 at 12:48 pm

Cool. The circle trick is very impressive. Thanks for sharing this for us.

Chris Stalnaker
May 12, 2010 at 12:54 pm

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
May 12, 2010 at 1:13 pm

Nice article , but in safari the go button is unclickable

Christopher Carlsson
May 12, 2010 at 1:54 pm

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
May 12, 2010 at 2:13 pm

Nice!!

TheAL
May 12, 2010 at 2:33 pm

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
May 12, 2010 at 2:39 pm

In Chrome 4.1.249.1064 (45376) there is still box corners near the input.

Chris Coyier
May 12, 2010 at 5:37 pm

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
May 12, 2010 at 6:48 pm

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
May 12, 2010 at 8:52 pm

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
May 12, 2010 at 9:11 pm

Very nice, I must say.

maya
May 12, 2010 at 10:45 pm

Oh great. I will try it.

Sachin
May 12, 2010 at 11:53 pm

I liked the search form example very much ..thanks…

CMS Themes
May 13, 2010 at 2:19 am

Great tuts! Too bad there’s still some browsers doesn’t support CSS3 rounded corners

Rajib Roy
May 13, 2010 at 2:45 am

Oh great. I will try it.

Sanchit
May 13, 2010 at 3:03 am

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
May 13, 2010 at 3:07 am

even if microsoft update their browser, nothing will change, coz people and even government still stick with lousy ie6

Catalin Red
May 13, 2010 at 3:26 am

Nice example, the search form looks really cool!

bruce lawson
May 13, 2010 at 3:40 am

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
May 13, 2010 at 4:24 am

nice but still not very much useful because of IE:(

Bert de Graaff
May 13, 2010 at 6:16 am

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
May 13, 2010 at 8:58 am

Curves not good in chrome/xp…

Tom Walters
May 13, 2010 at 11:36 am

Nice, but you should also add border-radius on its own to the CSS to support future browsers such as IE9.

Felix
May 13, 2010 at 3:15 pm

Does not work good in Chrome :-/

Web Design
May 13, 2010 at 3:49 pm

Done this style plenty of times before, never with pure CSS. Great, informative post.

Jason
May 13, 2010 at 6:43 pm

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
May 14, 2010 at 1:17 am

It doesn’t work very well on Chrome

Jerome Eteve
May 14, 2010 at 3:25 am

Nice one! You can also remove the ‘width’ CSS attribute of the button, so it adapts nicely to the text value.

David Smith
May 14, 2010 at 4:10 am

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
May 14, 2010 at 4:18 am

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
May 14, 2010 at 6:34 am

Great job!I use Firefox and it looks pretty cool!! :)

Fred
May 14, 2010 at 7:47 am

Wow this is so simple and it looks so nice. Thanks for the tip :)

Galen777
May 14, 2010 at 4:11 pm

Probably a little petty, but isn’t a round circle a bit of a tautology? Otherwise great work ;)

Jay
May 14, 2010 at 6:54 pm

CSS 3 depresses me. Maybe because we are stuck on IE 7 at work.

Galen777
May 15, 2010 at 3:17 am

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
May 15, 2010 at 9:52 am

<img src=”http://www.maniactive.com/backgrounds/quote-me.jpg”

Nik
May 15, 2010 at 2:00 pm

beautiful, though on Chrome 6 the rounded-corners just outside of the typing area are squared

Zequez
May 15, 2010 at 10:52 pm

For a 100x100px square, 50px border-radius it’s enough.

ewallpaperstock
May 16, 2010 at 5:26 am

very cool tutorial and i love CSS standards :)

Kaye Media
May 16, 2010 at 10:15 am

That is really nice, I will have to implement that into my own site!

Web Design Seo
May 17, 2010 at 1:28 am

This is really nice css form, thank you!

Kay
May 17, 2010 at 8:03 am

Viewing this in Google Chrome, doesn’t look too good :(

Design Ideas
May 17, 2010 at 12:50 pm

Really nice post, i’ve added a css3 search form that is very similar to this on my football memorabilia site. Great work

Cameron
May 17, 2010 at 8:14 pm

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
May 19, 2010 at 3:48 am

wow, I love the search box effect. Will definitely use it!

loethen
May 19, 2010 at 4:06 am

wow,css3 is big strong, beautiful effect ! i like it.

HozZzLi
May 19, 2010 at 11:23 am

Wow…we don’t need backgroud-image right?

junemarkm
May 19, 2010 at 11:02 pm

Thanks for posting your ideas and shared to us.

Webdesign
May 20, 2010 at 8:10 am

This is really nice css form, thank you!

Mimi
May 22, 2010 at 1:44 pm

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
May 23, 2010 at 4:50 am

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
May 25, 2010 at 8:13 pm

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é
May 26, 2010 at 9:23 am

So nice, very detailed…
Thanks for sharing :)

Anna
May 26, 2010 at 12:12 pm

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
May 28, 2010 at 2:56 am

sorry to say this, but Chrome does NOT work out well.

Web Design
May 31, 2010 at 4:58 am

Nice sharing, thanks mate!

pattaya
May 31, 2010 at 2:01 pm

So nice, very detailed…
Thanks for sharing

anandasama
Jun 1, 2010 at 2:41 am

Doesn’t work in Chrome.

web2besocial
Jun 1, 2010 at 12:16 pm

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
Jun 1, 2010 at 7:47 pm

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
Jun 2, 2010 at 2:51 am

Lovely search form. Come on you IE lot. Pull your finger out so we can make the internet a better place

Matt
Jun 3, 2010 at 6:21 pm

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
Jun 4, 2010 at 2:56 am

It works fine in Safari also. Nice written article.

Guillermo
Jun 5, 2010 at 8:18 am

cool trick! css 3 rocks!

George Lucas
Jun 6, 2010 at 9:58 am

Thanks! A few bugs in chrome otherwise i would have swapped for the search bar here!

Thanks again!

IFx
Jun 6, 2010 at 5:30 pm

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
Jun 7, 2010 at 10:25 am

Great stuff, css3 is really going round the web lately, all preparing for the big shift, html5 n css3, upgrade those skills!

Mike
Jun 7, 2010 at 11:18 am

Beautiful. Can’t wait for CSS3.

Gravity
Jun 7, 2010 at 12:25 pm

That turned out BEAUTIFUL for me… Using it for my blog! awesome!

Elizabeth Kaylene
Jun 8, 2010 at 2:01 pm

@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
Jun 9, 2010 at 5:04 am

Worth it… lovely :)

Olivo
Jun 9, 2010 at 10:04 am

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
Jun 10, 2010 at 2:59 am

Whats the necessary to use CSS3?

Jared @ Saskatoon Web Design
Jun 10, 2010 at 8:19 pm

Very cool, can’t wait until ie 9 comes out and css becomes the norm.

yohan
Jun 14, 2010 at 5:28 am

thanks for the tutorial :)

David
Jun 14, 2010 at 12:23 pm

Very cool! Is it weird that I prefer the Non-CSS3 look?

chai
Jun 15, 2010 at 3:58 am

css become more powerfull for design website… i will looking forward to it

Software Development India
Jun 17, 2010 at 4:12 am

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
Jun 19, 2010 at 7:21 am

Go example of solid css3. I like how you’ve shown the IE version – very bullet-proof.

ikilobo
Jun 19, 2010 at 11:22 pm

nice post..i’ll try it

ikilobo
Jun 19, 2010 at 11:27 pm

nice post..good

Gina
Jun 21, 2010 at 3:54 am

good post, very inspired to me! thanks~~!

Sashi
Jun 25, 2010 at 2:00 am

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
Jun 26, 2010 at 2:35 am

i tried ., very gud creativity

Dan
Jun 26, 2010 at 7:02 am

Nice tutorial, used it on one of my sites!

san
Jun 26, 2010 at 11:10 pm

nice,,,very beautiful

Php2ranjan
Jul 1, 2010 at 12:15 am

it very nice post.
grate idea … thanks..

Shane
Jul 1, 2010 at 6:46 am

Great post, can’t wait to try these out!!
Cheers!!

Mike J
Jul 5, 2010 at 5:51 pm

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
Jul 6, 2010 at 2:53 pm

Doesn’t look good with chrome

fajar
Jul 8, 2010 at 1:17 am

trims infonya

code pixelz media
Jul 8, 2010 at 5:11 am

very good. I like the way you present your content.

ridwan
Jul 8, 2010 at 9:48 am

so beautifful

Dave
Jul 12, 2010 at 10:47 pm

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
Jul 12, 2010 at 10:50 pm

Just too clarify, i only get the issue on the search field. the rest seems to work just fine.

yohan
Jul 13, 2010 at 10:06 pm

nice info, thanks for sharing :)

Kojeje
Jul 16, 2010 at 12:16 am

Wow, it is beautiful indeed :)

doris
Jul 16, 2010 at 7:40 am

so beautifful

Web Dizajn Design21th
Jul 19, 2010 at 12:02 am

very cool!

kai
Jul 19, 2010 at 8:18 pm

wowh… i wanna try it… it’s nice trick

Ian
Jul 21, 2010 at 1:16 pm

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
Jul 22, 2010 at 10:47 pm

very cool,i love it !

Adriaan Fenwick
Jul 23, 2010 at 3:34 am

Very cool technique, thanks for sharing it.

I get the same issue as @Dave on Google Chrome (5.0.375.99)

Freelance Portal
Aug 8, 2010 at 10:43 am

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
Aug 13, 2010 at 2:00 am

great, i like it

Madhyam Technology
Aug 17, 2010 at 4:21 am

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
Aug 20, 2010 at 9:29 am

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
Sep 4, 2010 at 9:33 am

So great. It’s very useful. Thanks so much!

Rik
Sep 18, 2010 at 1:00 pm

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
Sep 21, 2010 at 8:21 pm

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
Sep 24, 2010 at 2:01 am

Great post, can’t wait to try these out!!

Grace Yoon
Sep 27, 2010 at 12:25 pm

Thanks so much. It’s very useful!

Dion
Oct 13, 2010 at 3:18 am

Suprab…!!

Melvins
Oct 27, 2010 at 1:06 am

A nice post shared by you with us. It makes me smile and very useful in future.

Los Angeles Web Design

Pedro Luz
Oct 28, 2010 at 7:50 am

beautifull, just beautifull. thanks

Terry Reilly
Nov 2, 2010 at 7:13 pm

This is just what I was looking for. thanks

Mark Johnson
Nov 12, 2010 at 8:27 pm

Really nice,I like that round corner look.

Tahsin Hasan
Nov 15, 2010 at 3:13 am

Hello,

thanks for the post. you can find more discussion on web techniques on tahSin’s gaRage

Steve
Nov 15, 2010 at 6:15 pm

even better, add this css:

input[type=text]:focus {
background-color: #ff4;
}

suresh patel
Nov 24, 2010 at 7:37 am

this is not working

Jarod Billingslea
Nov 25, 2010 at 12:26 am

that’s a pretty minimal-styled search form!

Brett Widmann
Dec 4, 2010 at 2:56 pm

This is a great tutorial. Thanks for sharing.

James
Dec 4, 2010 at 7:25 pm

This is great!! Thank you, it is just what I was looking for to add to by new blog theme.

palanivel
Dec 14, 2010 at 12:41 am

super………….. Thank u sir………..

asd
Dec 23, 2010 at 7:14 pm

super! thanks

Henry Peise
Dec 24, 2010 at 5:06 am

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
Dec 25, 2010 at 2:46 am

As the Apple iphone 4 bumper is taken off the marke, will white iphone 4 available soon?

oky
Dec 27, 2010 at 10:57 pm

that’s great…. it’s cool…

mikwillson
Dec 29, 2010 at 2:04 am

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
Jan 11, 2011 at 3:14 pm

acaba kv nin özeti çıktımı

Ben
Jan 15, 2011 at 1:55 am

Thank you for everything!!!

tütüne son
Jan 29, 2011 at 3:58 pm

This is great!! Thank you, it is just what I was looking for to add to by new blog theme.

Cluehunt
Jan 29, 2011 at 10:52 pm

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
Feb 1, 2011 at 7:14 am

super! thanks

altın çilek
Feb 2, 2011 at 7:26 am

Thanks !!! Very usefull !!

hcg damla
Feb 2, 2011 at 1:18 pm

that’s great…. it’s cool…

romadur
Feb 3, 2011 at 5:44 am

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
Feb 4, 2011 at 7:15 am

that’s great…. it’s cool…

luis
Feb 12, 2011 at 11:23 pm

NICE, THANKS

joN
Feb 19, 2011 at 4:12 pm

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
Feb 19, 2011 at 4:39 pm

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
Feb 20, 2011 at 10:49 pm

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
Feb 21, 2011 at 5:34 am

super! thanks to you

Jessica
Feb 23, 2011 at 12:49 pm

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
Feb 25, 2011 at 4:13 am

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

รับทำเว็บไซต์
Mar 7, 2011 at 3:58 am

Awesome! I can’t wait to give this a try!

Nils
Mar 15, 2011 at 1:46 pm

Gorgeous. Thanks for sharing this. You rock.

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 5:06 pm

I agree, it indeed displays perfectly in CSS3 browsers. Thank you.

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:07 pm

It does degrade gracefully in non-CSS3 browsers too. Thanks.

Pincus
Apr 6, 2011 at 5:09 am

It does not work on IE9

Pete Nicholls
Apr 27, 2011 at 8:51 pm

That’s a feature.

JET
Jul 18, 2011 at 8:55 pm

hell yeah

Tomas Lyngen
Jul 23, 2011 at 5:10 pm

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
Sep 16, 2011 at 10:34 am

Nothing works on IE9

Grashnu
Oct 7, 2011 at 4:39 am

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
Apr 11, 2011 at 3:21 pm

some strange borders displays on Google Chrome.

Husein Yuseinov
Apr 25, 2011 at 3:33 am

I confirm, i see the same borders in Chrome!

The zach
May 19, 2011 at 6:22 pm

Do you mean the outline?
You can fix it with outline:none;

dexx
Apr 17, 2011 at 1:33 pm

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
May 6, 2011 at 4:10 pm

Really like your tutorial. How would you do this to customize a Google Custom Search form?

Thanks again.

toenail removal fungus
May 24, 2011 at 8:35 pm

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
May 25, 2011 at 2:02 am

That was a some strange borders displays on Google Chrome.

guaranteed car finance
Jun 18, 2011 at 10:50 am

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
Jul 8, 2011 at 3:55 am

Thank you for that very interesting.

orhanbt
Jul 15, 2011 at 4:33 pm

This is verry good

Dizzledorf
Jul 18, 2011 at 3:31 pm

Looks great on FF & Chrome, but bad on IE9.

Dave
Jul 18, 2011 at 6:07 pm

+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
Jul 29, 2011 at 11:48 pm

Looks good for me in Ff,Chrome and IE 9. But how to include search icon inside the box itself ?

Sheds Yorkshire
Aug 17, 2011 at 8:41 am

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
Aug 26, 2011 at 12:05 am

This is the content very useful.

Akvichop
Sep 9, 2011 at 3:57 pm

I see really strange borders in Chrome…

Steve @ Signature Web Marketing Works
Sep 27, 2011 at 1:45 pm

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
Oct 4, 2011 at 10:26 am

Love the search form demo! really helpful tutorial, thanks v much!

วิธีลง App iPhone
Oct 22, 2011 at 11:06 am

how to install app iphone 4

packaging machines
Oct 28, 2011 at 9:26 am

Great looking search form!

Small Dog Breeds
Dec 1, 2011 at 2:31 pm

hello my friend, nice to meet you, visit is my website if interest Small Dog Breeds, welcome to site.

bface
Jan 2, 2012 at 3:52 am

so it looks great – but how do i make it search , am i missing something? :(

nick
Apr 28, 2012 at 12:57 pm

dude learn php

Dan
Jan 6, 2012 at 3:48 pm

@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
Jan 11, 2012 at 7:25 am

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
Jan 11, 2012 at 8:12 am

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
Jan 19, 2012 at 7:50 am

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
Jan 20, 2012 at 4:51 am

definitely, a BIG BIG deals.thx, for article

MSG
Jan 27, 2012 at 6:24 am

Nice one chap will look to implement asap. I like your header too…awesome!

Harkoonen
Feb 15, 2012 at 10:48 am

Great idea!!! Thanks

DJDeals.com
Feb 17, 2012 at 2:53 pm

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
Mar 7, 2012 at 1:45 pm

Nice post. I found this blog with withbest practices for creating a search form that is quick and easy to use

Sushi
Mar 12, 2012 at 4:47 am

can u upload the source ?

Dogneto
Mar 12, 2012 at 4:49 am

nice tutorial.. but if u can give us the download source code its better

Alex Ron
Mar 28, 2012 at 1:12 am

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
Apr 6, 2012 at 5:19 am

Nice tutorial. Thanks.

Mohammed Uddin
Apr 12, 2012 at 10:17 pm

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
Apr 25, 2012 at 10:58 am

Por favor, poderia me enviar por e-mail o código fonte do formulário com bordas arredondadas? Obrigado!!!

model
Apr 30, 2012 at 4:51 am

This does look like a great theme.t

skyline
May 25, 2012 at 7:30 am

wow thanks for the tutorial, this is usefull for me..

click
May 28, 2012 at 4:28 am

Have you considered adding a few social bookmarking buttons to these sites. At least for twitter.

Alicia
Jun 6, 2012 at 5:55 am

Nice! I’ll try using this for my new site, http://www.doodlingpandas.com . Excited to try your method!

Taseer uddin
Jun 20, 2012 at 5:06 am

That’s very nice idea of creating circle by utilizing radius feature.
I like it.

johanso
Jul 1, 2012 at 9:11 am

is very good, creative things to do in html and css3, excellent

Maria Steaphen
Feb 7, 2017 at 3:22 am

Nice post about html and css3, its very excellent. And thanks for sharing this..,,.

asd
Jul 19, 2012 at 1:02 am

asd

asdasd
Jul 19, 2012 at 6:52 am

asdasdasd

asdasd
Jul 19, 2012 at 6:53 am

what

Dan
Jul 26, 2012 at 3:05 am

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
Sep 19, 2012 at 10:42 pm

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
Nov 23, 2012 at 9:21 pm

nice and attractive design code.

ao cuoi
May 24, 2013 at 4:51 am

tks for sharing!!!

fauzi
May 27, 2013 at 8:42 pm

Thanks, awesome tutorial.

Afzal
May 29, 2013 at 10:44 am

hey
Your post is just awesome :)
It is so informative :)
Thanks for sharing :)

shut off power
Dec 25, 2016 at 11:40 pm

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
Jan 21, 2019 at 9:22 am

But How can i add this code to my site

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.