Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
What more can be done to make an input field (for example, a search box) look distinct, besides setting input .search {} and input:focus .search{}?
My first instinct was to remove all borders from the field and add a background image, and on :focus, switch it with a background of a slightly different hue. Has anyone ever tried this? -
-
CommentAuthorDarren Hoyt
- CommentTimeJun 8th 2006
I recently used some input:focus styling here:
http://www.accumulist.com/index.php?whatPage=addAnEntry.php -
-
-
CommentAuthoradjustafresh
- CommentTimeJun 8th 2006
I have background images and various borders depending upon the state of the input field on my personal site:
#header input {
background: url(images/input_bg.gif) repeat-x;
font-family: "Lucida Sans", "Trebuchet MS", Arial, Verdana, Tahoma, Helvetica, Sans-Serif;
color: #47CFEB; /* BLUE */
font-size: 90%;
width: 180px;
margin-top: 2px;
}
#header input:focus {
border: solid 1px #0AACF1; /* DARKER BLUE */
} -
-
That looks nice. That code is similar to how I started building our new forms. A coworker wants to use rounded input fields- I think the only way this is possible currently is with images.
-
You can use rounded borders, only in firefox, but :focus also only works in firefox (ok so everything except for IE6), so it sounds like you might like it, just look up firefox's propriatary rounded corner CSS, also just setting the input completely invisible, and then setting a rounded box behind it would work, not as flexible though
1 to 5 of 5