html - 尝试将 margin-left 添加到输入字段

Question

我继承了一个遗留代码库，并负责覆盖少数 CSS 选择器（除其他外）。简单的。但是我遇到了一个奇怪的 ID，我无法弄清楚如何覆盖。

这是一个代码片段：

<form id="formInfo" name="formInfo" method="post">
  <label>Phone Number*</label>
  (
  <input id="formInfo:areaCode" name="formInfo:areaCode" type="text" value="" maxlength="3" size="3" class="autotab">
  ) -
  <input id="formInfo:phonePrefix" name="formInfo:phonePrefix" type="text" value="" maxlength="3" size="3" class="autotab"><input id="formInfo:phoneSuffix" name="formInfo:phoneSuffix" type="text" value="" maxlength="4" size="4">  
</form>

我要做的就是在最后一个输入的左侧添加 10px 的边距，这样两个字段就不会相互对接。

我不熟悉这种语法。我以前从未见过用冒号 (:) 连接的 ID。

这是我尝试过的：

#formInfo:phoneSuffix {
    margin-left: 10px;
}

#phoneSuffix {
    margin-left: 10px;
}

#formInfo #phoneSuffix {
    margin-left: 10px;
}

正如预期的那样，这些方法都没有增加所需的余量。

如果你想从中工作，这是我的小提琴。

限制：正如我所说，这是遗留代码。不幸的是，我无法更改或添加标记。这是一个用于多个应用程序的 SPA。更改它可能会产生意想不到的副作用。我必须将它作为我的 SPA 的一部分来处理并覆盖输入边距。不理想，但情况就是这样。

标签： htmlcsslegacy-code

Answer 1

您可以使用反斜杠来转义冒号

#formInfo\:phoneSuffix {
    margin-left: 10px;
}

请参阅：在 CSS 选择器中处理元素 ID 中的冒号