Utilize CSS in the same way as the legend tag styling

I'm looking to create a stylish border around my HTML component. While I know the HTML legend element can achieve this, I want to use it outside of a form.

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

I attempted to apply a border but encountered issues with the title and alignment. You can see the code snippet below:

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

Here is the link to the jsfiddle demonstrating the issue: http://jsfiddle.net/alpeshprajapati/a6a93fg9/1/

Any suggestions on how I can achieve a similar output as the legend element would be greatly appreciated. Thank you!

htmlcsslegend

Answer №1

You're almost there! To finalize the look of your markup to resemble a legend, simply add a background-color to the span that matches the background-color of both .temp and its containing element. This will prevent the border of .temp from showing through the text, as the default setting for background-color is transparent.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Measure with an "em" unit indicated by a dot

Could you clarify if there is a distinction between writing padding:.6em and padding:0.6em; and if they have the same value, why not just use padding:0.6em; ? Thank you ...

css

Missing ng-required fields not displaying the has-error validation in AngularJS forms

While editing any part of their address, the user should see a red invalid border around each field to indicate that the full form is required. However, for some reason I can't seem to get the 'Address' field to display this border. The set ...

javascriptcssangularjshtmltwitter-bootstrap

Create an Angular material table with expandable rows that become sticky when scrolled past, then automatically unstick once they are no longer in view

Currently, I am working with Angular Material Table v11.1.0 which includes a main row with expandable rows. I want the main row to become sticky once an expandable row is opened and remain sticky while scrolling through the table. My goal is for the main ...

htmlangulartypescriptangular-material

The .ogv video file type does not seem to be functioning properly within the HTML5 video tag on Firefox

Hello, I'm encountering some issues with playing the .ogv file in Firefox. If you could take a look at the link , that would be greatly appreciated. I believe my HTML5 video tag syntax is correct as it's working fine on other browsers. Thank you ...

htmlwordpressvideo

Creating a canvas with multiple label introductions can be achieved by following these

I am looking to group labels and sublabels on the x-axis of a canvas component. Currently, I only have sublabels like: RTI_0, RTI_1... I would like to add labels to these sublabels like: RTI = {RTI_0,RTI_1,RTI_2] BB = {BB_0, BB_1,BB_2,BB_3] <div cla ...

javascriptjqueryhtmltwitter-bootstrap

Exploring the functions of Safari input types: search, reset, and normalize

Is there a proper way to reset the appearance of a search input so that it resembles a text field in Safari? screenshot I'm experiencing an issue with Safari where there is unwanted padding on the left side of the search input that I can't seem ...

css

Having trouble with Tailwind UI components displaying properly in Next.js?

I tried following the Tailwind UI tutorial, but unfortunately, it doesn't seem to match up with my Next.js project. Take a look at my tailwind.config.ts: export const defaultTheme = require("tailwindcss/defaultTheme"); module.exports = { ...

cssreactjsnext.jstailwind-csstailwind-ui

What is the reason my bootstrap carousel isn't functioning properly?

My carousel is only displaying the first image and seems to be stuck. The navigation buttons are also not functioning. Here is the code for reference: <main> <div id="slider" class="carousel slide" data-mdb-ride="carousel"> <div cl ...

htmlcssbootstrap-5

Is it possible for you to generate an array containing only one element?

I've encountered an issue with my code. It functions correctly when the JSON data for "Customers" is in array form. However, if there is only one customer present, the code erroneously creates 11 table columns (corresponding to the number of keys in t ...

javascripthtmlangularjs

Adjusting the height of a table column to accommodate lengthy text without disrupting the layout of adjacent columns

I am encountering an issue while creating an invoice using an HTML table. The problem arises when the customer address value is too long, causing the sold by column to shift downwards. I need a way to break the customer address value when it reaches the ma ...

htmlcss

Button with a Jquery icon design

Hello, I am currently working on implementing an icon button that can collapse and expand text. Although I have successfully implemented the logic for collapsing/expanding, I am facing difficulties in creating the actual icon button. The theme I am require ...

javascriptjquerycssjquery-ui

Field for text input enclosed within the <select> tag

I have a project where I am implementing a dropdown using AngularJS. Here is the code snippet: <div class="col-md-9"> <input type="text" placeholder="Enter Module" list="names" ng-model="data.Name" /> <select id="names" class ...

htmlangularjscomboboxhtml-select

The transparent overlay div does not activate when clicking on a button in Internet Explorer 10

While tidying up my CSS and JavaScript, I may have gone a bit overboard. The code seems to work fine on Chrome, Safari, and Firefox, but it's causing chaos in IE10. Check out the code here <div id="bgmbutton1"> <img id="button1" src ...

jquerycsshtmlinternet-explorer-10incompatibility

Hover and hover-off functions in navigation menu

html <div class="hidden-nav"> <h4>lorem</h4> <ul class="decor-menu-list"> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a hre ...

javascriptjqueryhtmlcss

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow. The code snippet I experimented with: <div class="one"> &l ...

javascriptjqueryhtmlcss

Set the default value for a form control in a select dropdown using Angular

I've been struggling to figure out how to mark an option as selected in my select element, but I haven't had any luck. I've tried multiple solutions from the internet, but none of them seem to be working for me. Does anyone out there have ...

htmlangulartypescript

Unable to attach an onClick event handler to <TableRowColumn> element using Material-UI in React

In the past, I had a feature that allowed me to change the color of the text from red to green by clicking on a table cell. After introducing Material-UI in my React app and replacing the <td> tags with <TableRowColumn> tags, I noticed that th ...

javascripthtmlreactjsmaterial-ui

Each time I attempt to alter the color based on the count, an error is thrown: "TypeError: Cannot read property 'style' of null"

If the count is equal to zero, I want to change the color to black in the code below: if(Count === 0){ document.getElementById('value').style.color = 'black'; } return( <div className='container_new'> < ...

htmlcssreactjs

Range slider position not being updated after user interaction

I am working on a webpage with an embedded video and a range slider that serves as a progress bar. Using Javascript, I update the value of the range slider as the video plays, allowing users to navigate through the video content. However, I have encounter ...

javascripthtml

At what point is the rendering process of ng-switch completed?

I am currently utilizing ui-router and facing a challenge in instantiating a widget that requires a DOM element specified by its id as a parameter. The specific DOM element is nested within a <div ng-switch>, and I need to ensure the widget construct ...

javascripthtmlangularjsangular-ui-routerng-switch