CODEWITHSUNDEEP
cssformslegendfieldset
Camryn
Camryn

Reputation: 3

How to prevent the fieldset's border from going through the legend element surrounded by the form tag?

I have a form with these tags: <form>, <fieldset> and <legend>.

The fieldset's border passes through the middle of the legend element. I still want to have the border around my form, but I don't want to pass through the middle of it. The problem is like this: if I try in css only the fieldset and the legend, everything works fine, but if I also add the form style I get the error I'm talking about.

.form {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-height: 50px;
  padding: 5px;
  margin: 10px;
  clear: both;
  float: left;
  width: 40%;
  text-align: left;
  border: 0px;
}
fieldset {
  padding: 10px;
  margin: 2px;
  border: 1px solid #000000;
  width: 60%;
}
legend {
  padding: 0px;
  border: 0px;
  color: #ff0000;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
}
<form>
  <fieldset>
    <legend>Title</legend>
  </fieldset>
</form>

I guess it's a conflict between form and fieldset/legend styling. The reason I've added position: absolute; and the translate method is to position the form in the middle of the browser's page. So, how can I get rid of the border's fieldset passing through the middle of the legend, but still positioning my form in the center of the page?

Upvotes: 0

Views: 1729

Answers (2)

TylerH
TylerH

Reputation: 21078

If you want the legend to appear outside of the fieldset border, you will have to place it before the fieldset element, not within it. This is not valid HTML, however, so use it at your own risk.

form {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-height: 50px;
  padding: 5px;
  margin: 10px;
  clear: both;
  float: left;
  width: 40%;
  text-align: left;
  border: 0px;
}
fieldset {
  padding: 10px;
  margin: 2px;
  border: 1px solid #000000;
  width: 60%;
}
legend {
  padding: 0px;
  border: 0px;
  color: #ff0000;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
}
<form>
    <legend>Title</legend>
    <fieldset>
    </fieldset>
</form>

Upvotes: 1

n1kkou
n1kkou

Reputation: 3142

form legend{ position:relative; z-index:2 }

Upvotes: 2

Related Questions