htmlcssfieldset

restoring default fieldset behavior with inline css

My company is using https://tabler.io/ CSS and it's kinda mucking up fieldsets. eg.:

<fieldset>
  <legend>Demo</legend>
  Field 1: <input type="text"><br>
  Field 2: <input type="text">
</fieldset>

This is how that fieldset appears without tabler.io mucking things up:

enter image description here

Here's how it looks like with tabler.io (JSFiddle) :

<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css">

<fieldset>
  <legend>Demo</legend>
  Field 1: <input type="text"><br>
  Field 2: <input type="text">
</fieldset>

enter image description here

Unfortunately, it's not clear to me how to restore the default behavior with inline CSS

I can get the border to reappear by adding style="border: 1px solid" to <fieldset> but idk how to make the word "Demo" appear inline.

Any ideas?

Solution

  • As per comment, the browser devtools inspect facility shows the CSS properties set by tabler.

    This snippet sets them all to 'revert' so you should be back to the basis from which you can of course add your own styling if wanted:

    <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css">
<style>
  /* the styles as I saw them */
  
  fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }
  
  legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
  }
  /* now setting them to revert */
  
  fieldset {
    min-width: revert;
    padding: revert;
    margin: revert;
    border: revert;
  }
  
  legend {
    float: revert;
    width: revert;
    padding: revert;
    margin-bottom: revert;
    font-size: revert;
    line-height: revert;
  }
</style>

<fieldset>
  <legend>Demo</legend>
  Field 1: <input type="text"><br> Field 2: <input type="text">
</fieldset>