CODEWITHSUNDEEP
htmlcssfieldset
neubert
neubert

Reputation: 16832

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/[email protected]/dist/js/tabler.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/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?

Upvotes: 0

Views: 61

Answers (1)

A Haworth
A Haworth

Reputation: 36664

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/[email protected]/dist/js/tabler.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/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>

Upvotes: 1

Related Questions