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

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

这是 my fiddle如果你想从那里开始工作。

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

Answer 1

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

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

参见:Handling a colon in an element ID in a CSS selector