Web Designer Wall
UI Components

How to Build a Beautiful CSS Search Form

By Aigars Silkalns Updated 9 min read

A good search form is a pill-shaped field with a visible focus state, an icon, a clear submit button and an accessible name. Today you can build all of it with a few dozen lines of plain CSS and one semantic <form>, with no images, no vendor prefixes and no JavaScript. This tutorial walks through the finished result, explains each decision, and shows the details that make a search box feel polished: inset depth, a focus ring that follows the whole pill, dark mode and keyboard behaviour.

The original version of this article, from 2010, was a showcase for border-radius, inset box-shadow and CSS gradients. Those features are now universal, so the interesting questions have moved on to accessibility, theming and the small interaction states that separate a decent field from a great one.

Two copies of the same pill-shaped search form side by side, light theme on the left and dark theme on the right, each focused with a blue border, a soft ring and a blue gradient Search button
The same CSS in light and dark, both focused: accent border, soft ring around the whole pill, gradient button. Only the token values change.

Start with the right HTML

The styling is the easy part. Most search forms fail because of the markup underneath, so write that first.

<form class="search" role="search" action="/search" method="get">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" aria-hidden="true">
    <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
  </svg>
  <label class="visually-hidden" for="q">Search the site</label>
  <input id="q" name="q" type="search"
         placeholder="Search tutorials, snippets…"
         autocomplete="off" enterkeyhint="search">
  <button type="submit">Search</button>
</form>
  • role="search" turns the form into a search landmark, so screen reader users can jump straight to it. Use it once per page for the main site search.
  • type="search" tells browsers and assistive technology that this is a search field, and Chrome and Safari add a native clear (x) button once something is typed. Otherwise it behaves like a text input. The Search key on touch keyboards comes mostly from enterkeyhint and from the input sitting inside a form.
  • A real <label> is required. A placeholder is not a label: it disappears as soon as someone types. The hidden attribute would remove it from assistive technology too, so the label gets a visually-hidden class instead (the utility is below).
  • enterkeyhint="search" labels the Enter key on touch keyboards.
  • The icon is decorative, so it gets aria-hidden="true" and inherits its colour through currentColor.

The utility keeps the label in the accessibility tree while taking no space on screen:

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

Chrome and Safari draw their own clear (x) inside search fields. You can leave it, restyle it with input::-webkit-search-cancel-button, or hide it with appearance: none on that pseudo-element. The finished code at the end keeps it and only gives it a pointer cursor.

Define colours as tokens

Put every colour in custom properties on :root and let the browser pick light or dark values with light-dark(). It needs color-scheme to be set, which also makes built-in controls and scrollbars follow the same theme.

:root {
  color-scheme: light dark;
  --accent:  oklch(62% 0.19 255);
  --surface: light-dark(#f3f5f9, #1b1e27);
  --field:   light-dark(#fff, #262a36);
  --text:    light-dark(#1d2230, #e8ebf3);
  --muted:   light-dark(#5d6577, #a2a9bb);
  --border:  light-dark(#cfd4df, #3a4052);
}

OKLCH is worth using for the accent because lightness behaves predictably: you can make a lighter or darker shade by changing only the second number, and the result still looks like the same blue. That is exactly what the button gradient does later. Both light-dark() and OKLCH are part of Baseline, so you can use them without a fallback in current browsers. If you need to support older ones, declare a plain hex value first and put the modern one after it.

Build the pill

The old trick was a huge pixel radius. The modern equivalent is 100vmax, which is always larger than the element, so the ends stay perfectly round whatever the height. A flex container lays out the icon, input and button, and the border, background and shadow live on the form itself rather than on the input. That choice matters in the next section.

.search {
  display: flex;
  align-items: center;
  gap: .25rem;
  inline-size: min(100%, 32rem);
  padding: .375rem;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 100vmax;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / .12);
  transition: border-color .2s, box-shadow .2s;
}

.search svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-start: .75rem;
  flex: none;
  color: var(--muted);
}

.search input {
  flex: 1;
  min-inline-size: 0;
  padding: .6rem .5rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  outline: 0;
}

.search input::placeholder { color: var(--muted); }

Three details are easy to miss. min-inline-size: 0 lets the input shrink inside a flex row on narrow screens instead of pushing the button out of view. inline-size: min(100%, 32rem) gives a width that is fluid on phones and capped on desktop without a media query. And the inset shadow is the same effect the 2010 article demonstrated: a soft darker edge at the top that makes the field look recessed, so it reads as something you type into.

Make the focus state obvious

Removing the input’s outline with outline: 0 is only acceptable if you replace it with something at least as visible. Because the border and shadow belong to the form, :focus-within can style the entire pill whenever the input or the button has focus.

.search:focus-within {
  border-color: var(--accent);
  box-shadow:
    inset 0 2px 6px rgb(0 0 0 / .12),
    0 0 0 4px color-mix(in oklch, var(--accent) 30%, transparent);
}

color-mix() creates the translucent ring from the same accent token, so you never maintain a second blue. The second shadow is a zero-blur spread, which draws a crisp ring outside the border.

The search form twice: idle with a grey border and placeholder text on top, and focused below with an accent border, soft blue ring and typed text
Idle versus focused. The ring wraps the whole pill, and the accent border does the contrast work.

Contrast is worth checking by hand. At Level AA, WCAG asks for a visible focus indicator (2.4.7 Focus Visible), and because that indicator is non-text content it must reach 3:1 against adjacent colours (1.4.11 Non-text Contrast). The stricter 2.4.13 Focus Appearance is Level AAA. The 30% ring is a soft halo and is not 3:1 against the page by itself; the border change to the full accent carries the contrast. Measured for this demo, the accent is 3.69:1 against the white field and 3.38:1 against the light page in the light theme, and 3.88:1 against the dark field and 4.51:1 against the dark page in the dark theme. If you change the accent, recheck it against both backgrounds.

Style the button with a gradient

A gradient button is still the quickest way to add weight to the primary action. Interpolating in OKLCH avoids the muddy grey midpoint that older sRGB gradients get when the two colours differ a lot, and you no longer need a different syntax per browser.

.search button {
  padding: .65rem 1.4rem;
  border: 0;
  border-radius: 100vmax;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(in oklch, oklch(56% .2 259), oklch(48% .2 264));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .35),
    0 2px 6px color-mix(in oklch, var(--accent) 45%, transparent);
  transition: filter .2s, translate .1s;
}

.search button:hover  { filter: brightness(.92); }
.search button:active { translate: 0 1px; }
.search button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

The inset white line along the top edge is a highlight that mimics a light source, and it is a direct descendant of the inset shadow trick from the old tutorial. :focus-visible shows the outline for keyboard users and hides it for mouse clicks, which is why it is preferred over plain :focus on buttons. White text needs 4.5:1 on the button. Measured with the WCAG formula, the lighter gradient stop, oklch(56% .2 259), gives 4.80:1 and the darker stop gives 6.88:1, so the text passes along the whole gradient; hover darkens the button, so it only improves. A lighter blue such as oklch(68% .17 255) would fail at 2.9:1, so recheck both stops whenever you change the colours.

If you want to see how the older gradient syntax worked and why it needed per-browser prefixes, our Cross-Browser CSS Gradient article is the historical reference; everything in it is now a single standard declaration.

Respect motion preferences and small screens

The transitions here are tiny, but turning them off for people who ask is one line.

@media (prefers-reduced-motion: reduce) {
  .search, .search button { transition: none; }
}

@media (max-width: 30rem) {
  .search button { padding-inline: 1rem; }
}

On very small screens you can also hide the button label and keep only an icon, as long as the button keeps an accessible name such as aria-label="Search". Keep the field at least 16px in font size: iOS Safari zooms the page when focusing a smaller input.

Browser support and what to skip

Feature Use it for Notes
border-radius, box-shadow inset Pill shape, recessed field Supported everywhere for over a decade; no prefixes
:focus-within Ring around the whole form Baseline, widely available
:focus-visible Keyboard-only outline on the button Baseline, widely available
color-mix(), OKLCH Derived rings and shadows, gradients Baseline; add a plain colour first if you need older browsers
light-dark() Theme tokens Baseline; needs color-scheme

Things that were common in 2010 and should now be left out: -webkit- and -moz- prefixed radius and shadow, sliced background images for the field and button, IE filter gradients, and JavaScript that toggles a class on focus. Real placeholder support removed the need for the “clear the default text on click” script too.

Common mistakes to avoid

  • Using the placeholder as the only label. Keep a real label, even a visually hidden one.
  • Removing the outline without a replacement. If keyboard users cannot see focus, the form is broken for them.
  • Using type="text" with a magnifier button but no role="search". You lose the landmark and the mobile keyboard hint.
  • Icon-only buttons with no name. A magnifier glyph alone is invisible to a screen reader.
  • Fixed pixel widths. Use min() with a percentage so the form fits any container.

Take it further

This form is deliberately plain so you can drop it into any layout. When you want more behaviour, start from a working pattern instead of building from scratch:

The complete code

Save this as one HTML file and open it. It is the exact file used for the screenshots in this article, and it includes the reset, page background and visually-hidden utility that the snippets above leave out. Change the three numbers in --accent and the ring, shadow and button shadow follow; the button gradient has its own two stops, so adjust and recheck those separately.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS search form</title>
  <style>
    :root {
      color-scheme: light dark;
      --accent:  oklch(62% 0.19 255);
      --surface: light-dark(#f3f5f9, #1b1e27);
      --field:   light-dark(#fff, #262a36);
      --text:    light-dark(#1d2230, #e8ebf3);
      --muted:   light-dark(#5d6577, #a2a9bb);
      --border:  light-dark(#cfd4df, #3a4052);
    }

    *, *::before, *::after { box-sizing: border-box; }

    body {
      margin: 0;
      min-block-size: 100vh;
      display: grid;
      place-items: center;
      padding: 1rem;
      background: var(--surface);
      color: var(--text);
      font: 1rem/1.5 system-ui, sans-serif;
    }

    .visually-hidden {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .search {
      display: flex;
      align-items: center;
      gap: .25rem;
      inline-size: min(100%, 32rem);
      padding: .375rem;
      background: var(--field);
      border: 1px solid var(--border);
      border-radius: 100vmax;
      box-shadow: inset 0 2px 6px rgb(0 0 0 / .12);
      transition: border-color .2s, box-shadow .2s;
    }

    .search:focus-within {
      border-color: var(--accent);
      box-shadow:
        inset 0 2px 6px rgb(0 0 0 / .12),
        0 0 0 4px color-mix(in oklch, var(--accent) 30%, transparent);
    }

    .search svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      margin-inline-start: .75rem;
      flex: none;
      color: var(--muted);
    }

    .search input {
      flex: 1;
      min-inline-size: 0;
      padding: .6rem .5rem;
      border: 0;
      background: none;
      color: inherit;
      font: inherit;
      outline: 0;
    }

    .search input::placeholder { color: var(--muted); }

    /* Optional: Chrome and Safari draw a native clear (x). Hide it with: */
    /* .search input::-webkit-search-cancel-button { appearance: none; } */
    .search input::-webkit-search-cancel-button { cursor: pointer; }

    .search button {
      padding: .65rem 1.4rem;
      border: 0;
      border-radius: 100vmax;
      cursor: pointer;
      font: inherit;
      font-weight: 600;
      color: #fff;
      background: linear-gradient(in oklch, oklch(56% .2 259), oklch(48% .2 264));
      box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .35),
        0 2px 6px color-mix(in oklch, var(--accent) 45%, transparent);
      transition: filter .2s, translate .1s;
    }

    .search button:hover  { filter: brightness(.92); }
    .search button:active { translate: 0 1px; }
    .search button:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
      .search, .search button { transition: none; }
    }

    @media (max-width: 30rem) {
      .search button { padding-inline: 1rem; }
    }
  </style>
</head>
<body>
  <form class="search" role="search" action="/search" method="get">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" aria-hidden="true">
      <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
    </svg>
    <label class="visually-hidden" for="q">Search the site</label>
    <input id="q" name="q" type="search"
           placeholder="Search tutorials, snippets…"
           autocomplete="off" enterkeyhint="search">
    <button type="submit">Search</button>
  </form>
</body>
</html>

Free snippets for this topic

Ready-made Bootstrap 5 components with live preview and copy-ready code.

All search snippets
121 comments from the archive

  1. 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.

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

  4. 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!

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

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

  7. 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 ()

    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

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

  9. 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 …

  10. 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:

    The future of web will be great, I’m very happy with that!
    Hugs! :)

  12. 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.

  13. @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

  14. 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).

  15. CSS3 makes our lives easier…

    also worth looking into rounded corners!

  16. 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.

  17. @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.

  18. 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.

  19. 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!

  21. 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.

  23. 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!

  25. 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.

  26. 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

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

  28. Good, but if it doesnt work in IE, its not worth yet.
    What the hell guys at Microsoft are doing with their Browsers..
    Lazy.

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

  30. 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.

  32. 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

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

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

  35. 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!

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

  37. 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

  38. 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.

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

  42. 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. ;)

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

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

  49. 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.

  51. 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.

  52. 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…

  53. 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.

  54. 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!

  56. 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!?

  57. 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!

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

  59. 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..??

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

    Thanks again!

  62. Hi,
    try to have a look at this nice solution for rounded/curved corners (IE6 to IE 8):

  63. @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. (:

  64. 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)

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

  68. 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.

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

  70. 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.

  71. 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.

  73. 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.

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

  75. 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?

  76. Very cool technique, thanks for sharing it.

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

  77. 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.

  78. 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.

  79. 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.

  80. 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

  81. even better, add this css:

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

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

  83. 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.

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

  85. 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

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

  87. 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.

  88. 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

  89. 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.

  90. 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);

  91. 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.

  92. 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.

  93. 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

  94. 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.

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

    Thanks again.

  96. 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.

  98. 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.

  100. +1 for looks fine in all modern browsers except ie9 which bungles the area around the circle and the text is not centered.

  101. 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-).

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

  103. 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!

  104. 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

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

  106. 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.

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

  108. @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.

  109. 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.

  110. 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…

  112. 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

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

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

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

  117. Really cool, although the button needs a hover state, active state and ideally a spinner on click, I’m just adding this now :)

  118. 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.

  119. 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.

Comments are closed on this article.