从 CSS 中删除 !important答案

【问题标题】：Removing !important from css从 CSS 中删除 !important
【发布时间】：2021-03-14 12:21:25
【问题描述】：

我目前正在开发一个 wordpress 网站。使用 woocommerce 和这个名为 SMS Alert 的插件，它允许发送 OTP 进行注册。该插件在我的注册表单中插入了带有“电话”标签的额外字段，并且我已启用下拉列表以选择国家/地区代码。

问题出在 css 上。

<input type="tel" class="input-text phone-valid" name="billing_phone" id="reg_billing_phone" value="" placeholder="Enter Number Here" data-id="sa_intellinput_0" autocomplete="off" style="padding-left:1269px !important;">

由于代码中的'style'属性，输入字段很长。

style="padding-left:1269px !important;"

而且它不会消失。我希望 padding-left 为 80px。我尝试了以下方法：

.page-id-2994 input#reg_billing_phone.input-text.phone-valid {
    width: 515px;
    padding-left: 80px !important;
}

还有来自link的一些Javascript
另外，我无法在文件管理器中找到它的 css 文件。

我该如何解决这个问题？

【问题讨论】：

你确定这实际上来自一些标准的 css 吗？在我看来，这确实看起来像基于 JS 的东西，所以有一些脚本将这种内联样式添加到您的元素中。尝试重新加载没有 JS 的页面，看看是否仍然存在

标签： javascript css wordpress woocommerce plugins

【解决方案1】：

你必须使用脚本来删除内联样式，然后你就不需要在你的css中使用重要的。只需使用：

document.getElementById('reg_billing_phone').removeAttribute('style');

【讨论】：