Archive:

June 2008

Tags:

CSS

See also

RSS Feed RSS Feed Add to Google Reader or Homepage

Follow us on
Follow iData on Twitter

iData Technologies Blog


CSS input fields with rounded corners

Posted 6/2/2008 4:34:19 PM by Mark Reichard

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.
 

Tags: CSSComments