Using CSS on Forms
I am working on a search box function for a clients membership database in php and was investigating how to style it using CSS and ran across a pretty good handful of resources, a few of which use the ”legend” feature to overlay a “tab” or “legend” of sorts over the box. The achieved affect is very cool and I thought that I would share the source code used on this: Source: Applying CSS to forms
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
.submit input
{
margin-left: 4.5em;
}
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}
.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
fieldset
{
border: 1px solid #781351;
width: 20em
}
legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}
I will probably post my finished product here for review once I get to that point. What I am working is going to vary on this quiet a bit because I have drop downs and text boxes on my search box but the theory of framing it all in is going to hopefully be very similar.
Related Posts:
