<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
/* Defining a custom border on all
sides except the top side */
.custom-field {
border: 4px solid;
border-top: none;
margin: 32px 2px;
padding: 8px;
}
/* Defining the style of the
heading/legend for custom fieldset */
.custom-field h1 {
font: 16px normal;
margin: -16px -8px 0;
}
/* Using float:left allows us to mimic
the legend like fieldset. The
float:right property can also be
used to show the legend on right side */
.custom-field h1 span {
float: left;
}
/* Creating the custom top border to make
it look like fieldset defining small
border before the legend. The width
can be modified to change position
of the legend */
.custom-field h1:before {
border-top: 4px solid;
content: ' ';
float: left;
margin: 8px 2px 0 -1px;
width: 12px;
}
/* Defining a long border after the
legend, using overflow hidden to
actually hide the line behind the
legend text. It can be removed
for a different effect */
.custom-field h1:after {
border-top: 4px solid;
content: ' ';
display: block;
height: 24px;
left: 2px;
margin: 0 1px 0 0;
overflow: hidden;
position: relative;
top: 8px;
}
</
style
>
</
head
>
<
body
>
<
fieldset
>
<
legend
>
Fieldset 1 Legend
</
legend
>
Original Fieldset
</
fieldset
>
<
div
class
=
"custom-field"
>
<
h1
>
<
span
>
Custom created Fieldset
</
span
>
</
h1
>
<
div
>
<
label
for
=
"shipping_name"
>
Name:
</
label
>
<
br
>
<
input
type
=
"text"
name
=
"shipping_name"
id
=
"shipping_name"
>
</
div
>
<
div
>
<
label
for
=
"shipping_street"
>
Street:
</
label
>
<
br
>
<
input
type
=
"text"
name
=
"shipping_street"
id
=
"shipping_street"
>
</
div
>
</
div
>
</
body
>
</
html
>