使用 JQuery 或 CSS 从 html 元素中删除所有 css？

Question

我有一个表格，我想通过在用户单击单元格时显示输入元素来使单元格可编辑，并且我想为输入该单元格提供相同的高度和宽度。问题是我使用的是 Angular Material，它们在输入元素上有一些样式（不是通过类），它覆盖了我试图应用于输入元素的类或内联样式。那么如何使用 jQuery 从输入元素中删除这些样式呢？

CSS是这样应用的

input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}

Answer 1

你可以像下面这样用jQuery来做

$("input").focus(function(){ $(this).css("all","unset"); });

input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: red;
border-image: initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"  />

你可以用下面的css来做

input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: red;
border-image: initial;
}

input:focus {
  all: initial;
  * {
    all: unset;
  }
}

<input type="text"  />