使用内联CSS恢复默认字段集行为

Question

我的公司正在使用 https://tabler.io/ CSS，它有点搞乱了字段集。例如：

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

这就是字段集的显示方式，没有 tabler.io 搞砸事情：

这是 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>

不幸的是，我不清楚如何使用内联 CSS 恢复默认行为

我可以通过将

style="border: 1px solid"

添加到

<fieldset>

来使边框重新出现，但我不知道如何使“Demo”一词内联显示。

有什么想法吗？

Answer 1

根据评论，浏览器开发工具检查工具显示 tabler 设置的 CSS 属性。

此代码片段将它们全部设置为“恢复”，因此您应该回到基础，如果需要，您当然可以添加自己的样式：

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