asked on

Style an Input and Legend with rounded corners

Can anyone help me on styling the input fields legend with rounded corners?

I tried a few things but nothing happened.

Thank you!

ASKER CERTIFIED SOLUTION

LZ1

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

coreybryant

ASKER

I don't really have anything just yet, but I was looking through the CSS and saw the -webkit but I could not get it to work. I tried on Firefox and IE 9

Here is what I have right now: http://www.loudestcommerce.com/contact

I do have some styles already. I am guessing that I could just add the .rounded5 to my style for input?

input, select, textarea
{
	border: solid 1px #000;
	background-color: #fff;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 1.0em;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Open in new window

label,input {
	display: block;
	float: left;
	margin-bottom: 10px;
}
input, select, textarea
{
	border: solid 1px #000;
	background-color: #fff;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 1.0em;
}
label {
	text-align: right;
	width: 125px;
	padding-right: 20px;
}

br {
	clear: left;
}
legend{
	padding:10px;
	background:#FEFCD6;
	border:1px solid #6fb34b;

}

.rounded5{	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Open in new window

LZ1

That's generally what I do for anything that needs rounded corners or a "general" style as I like to call it.

Make a class, then just add it to the elements. I just did it in FF via Firebug and it worked great

coreybryant

ASKER

Thanks, I did just add it to my input:

label,input {
	display: block;
	float: left;
	margin-bottom: 10px;
}
input, select, textarea
{
	border: solid 1px #000;
	background-color: #fff;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 1.0em;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

}
label {
	text-align: right;
	width: 125px;
	padding-right: 20px;
}

br {
	clear: left;
}
legend{
	padding:10px;
	background:#FEFCD6;
	border:1px solid #6fb34b;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
fieldset{	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Open in new window

and it seems to work great!