CODEWITHSUNDEEP
htmlcsslegend
Alpesh Prajapati
Alpesh Prajapati

Reputation: 1643

Apply CSS same as legend tag

I want to create a border around my html component. HTML legend element can be used but i want to use it out of the form.

HTML Legend: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset

I tried but there is an issue title and border. Below is the jsfiddle for the same. 

.temp {
  border: 1px solid #999;
  margin-top: 20px;
  padding: 20px;
  position: relative;
}

http://jsfiddle.net/alpeshprajapati/a6a93fg9/1/

How can i achieve output same as legend ? Thanks.

Upvotes: 1

Views: 459

Answers (1)

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

You are pretty much there. The last step to make your markup look like a legend would be to add a background-color to the span which matches the background-color of .temp and the element that contains it. This ensures that the border or .temp does not show behind the text (as background-color is transparent by default).

.temp > span {
  background-color: white;
  font-size: 21px;
  left: 2%;
  position: absolute;
  top: -15px;
}
.temp {
  border: 1px solid #999;
  margin-top: 20px;
  padding: 20px;
  position: relative;
}
<div class="temp">
  <span>Permissions</span>
  <table class="table cs-table-no-bordered table-striped">
    <thead>
      <tr>
        <th>Modules</th>
        <th class="text-center">Edit</th>
        <th class="text-center">Delete</th>
        <th class="text-center">View</th>
        <th class="text-center">All</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>M1</td>
        <td class="text-center">
          <input type="checkbox" />
        </td>
        <td class="text-center">
          <input type="checkbox" />
        </td>
        <td class="text-center">
          <input type="checkbox" />
        </td>
        <td class="text-center">
          <input type="checkbox" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions