CSS input fields with rounded corners

Monday, June 02, 2008


So it's not my intention to post frequently about technology nuts and bolts, but I thought this was fun.  We're working on a client site for which the client wants the site search input box to be rounded and have a colored background like this: 



This site uses our Synapse Publisher CMS, which includes a built in site search control.  This control lets you set CSS classes for the input box and text or image button, but a quick internet search for using CSS to create an input box with rounded corners did not reveal any CSS solutions which did not require the input field markup to be changed --- everyone wanted to either position images next to the input control or put it in a DIV and set the background of the DIV.

Fortunately, a CSS solution that does not require any markup other than setting the CSS class of the input control and creating an image for the input control background was pretty straightforward.  Here's the class:

.searchText
{
     border-style: hidden;
     border-width: 0px;
     color: #8AB08A;
     padding-left:7px;
     padding-right:7px;
     font-size:8pt;
     background-image: url(/images/searchBox.gif);
     margin-left:3px;
}

Here's the image for the input background:



The end result is the shot above.  By the way --- one note to any MAC using designers who read this --- the contrast between search box and background renders renders much lower on the PC than on the MAC.  These colors will have to change before the site goes live because the search box fades into the background on the PC.
 

Posted by: Mark Reichard at 4:34 PM
Tags: CSS

Comments:

9/18/2008 10:15:54 AM toy wrote:
thank you! simple obvious elegant love it

1/18/2009 4:37:00 AM Jobs Toolbar coder wrote:
Hey thanks! I was looking for a cool way to do this for a jobs toolbar I am making. Works like a charm... Now I just have to get rid of those ugly grey boxy submit and drop-down menu buttons... :) Nice!

4/20/2009 10:07:35 AM Herman wrote:
This works great in Firefox and Safari, but when I use it in IE (6 or 7) there is a problem: When text is entered and exceeds the length of the box, the graphic itself will move to the left and disappear. Do you have an web address where this is being used? Thanks.

6/1/2009 10:33:28 AM Sean wrote:
Herman, have you tried setting the max characters on your text input box and then choosing an appropriate sized graphic? That should avoid too many characters being typed.

6/3/2009 1:25:27 PM PerfectWeb wrote:
I encountered same problem as Herman in IE6...the bg image slides. There is also the highlight issue...when the browser puts a focus highlight on the search box, the highlight is a square shape that doesn't match. You can turn focus highlight off with CSS, but then the user experience feels off. I also would love to see a working sample.

6/10/2009 12:19:40 PM Mark wrote:
There is a working sample at http://www.sportscongroup.com/ Thanks for the feedback about IE6. I'll check it out.

2/16/2010 11:29:15 AM 1/1/1900 wrote:
why would you need to use a background image instead of just specifying a background color for the field? just curious.

3/9/2010 10:34:25 PM Julia wrote:
This will solve the problem with background: background-image: url(/images/searchBox.gif) no-repeat fixed;

10/10/2010 4:55:09 AM gurpreet wrote:
this will solve my problem too....thanks

12/26/2010 10:14:38 PM anmol wrote:
thank you! simple obvious elegant love it

3/4/2011 11:36:00 PM Alok wrote:
Thanks that's working.....

7/1/2011 12:23:21 AM Amarjeet Mishra wrote:
i have found it quite helpful.well waiting for your next post.thanks very much for providing such a grate stuff




Blog comments